Reactjs “扩展”是什么意思；jsx“；你到底是怎么做的？

我试图用React实现我的前端。通常，当我制作一个组件时，我制作了一个名为

Header

的文件夹，并在文件夹中制作

index.js

，这样我就可以轻松地用文件夹名导入它，因为index.js是在文件夹中自动调用的

import Header from "components/Header";

---

我最近开始使用

materialui

，当他们在自己的框架中创建一个组件时，我发现了一点不同。他们创建了一个同名的文件夹

Header

，但他们将

Header.jsx

放在文件夹中。他们使用

jsx

扩展是否有特定的原因？我认为我的方法是传统的，但由于谷歌的框架是由

制作的，我认为这可能是一个合理的原因。
除了一个不同检测JSX和lints/格式的编辑器/插件外，没有实际的功能差异。有些人使用的标准是
.js
文件应包含与标准js相同的内容。JSX显然不能作为一个普通的JS文件工作，所以您可以使用
.JSX
来表示这一点，并让其他开发人员知道。
JSX是React应用程序中使用的语法，它代表JavaScript扩展。它是使用React构建UI的有用格式。React不需要它，但如前所述，它在Javascript内部构建UI时非常有用

JSX类似于Javascript，但仍然是Javascript的扩展，因此在编写JSX代码时需要记住一些细微的差别和细微差别。例如，由于
class
是javascript中的一个关键字，因此您需要为JSX对象使用
className

例如：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const元素=(
你好，世界！
);

您可以在此处了解有关JSX格式的更多信息：
jsx
扩展名指的是包含一些
jsx
代码的文件，比如
，它实际上是
React.createElement
的快捷方式。不强制使用
jsx
扩展名，如果构建系统正确配置为使用正确的
babel插件传输
.js
文件，则可以在
.js
文件中编写
jsx
代码。我认为拥有
.jsx
是一个很好的观点，因为您（和您的IDE）知道这些文件包含jsx代码