扩展“jsx”究竟做了什么？ [重复]

Question

这个问题在这里已有答案：

我正在尝试使用React实现我的前端。通常当我创建一个组件时，我创建了一个名为Header的文件夹，并在文件夹中生成index.js，以便我可以轻松地使用文件夹名称导入它，因为index.js会自动在文件夹中调用。

import Header from "components/Header";

我最近开始使用Material-UI，并发现他们在框架中创建组件时有所不同。他们创建了一个名为Header的文件夹，但他们将Header.jsx放在文件夹中。他们使用jsx扩展有特定原因吗？我认为我的方式是传统的，但自从Google制作的框架以来，我认为可能有一个合理的原因。

Answer 1

除了可能以不同方式检测JSX和lints /格式的编辑器/插件之外，没有实际的功能差异。有些人使用.js文件应该包含作为标准vanilla JS的内容的标准。 JSX显然不会作为一个vanilla JS文件工作，所以你使用.jsx来表示这个并让其他开发人员知道。

Answer 2

JSX是React应用程序中使用的语法，它代表JavaScript扩展。它是使用React构建UI的有用格式。 React并不要求它，但如上所述，它在Javascript中构建UI时很有用。

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

例：

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

您可以在此处了解有关JSX格式的更多信息：https://reactjs.org/docs/introducing-jsx.html