扩展“jsx”到底做什么？[副本]

Question

我试图用React实现我的前端。通常，当我制作一个组件时，我制作了一个名为Header的文件夹，并在文件夹中制作index.js，这样我就可以很容易地用文件夹名称导入它，因为index.js是在文件夹中自动调用。

import Header from "components/Header";

我最近开始使用材料-用户界面，并发现当他们在他们的框架中制作组件时有所不同。他们制作了一个同名的文件夹Header，但是他们在文件夹中放入了Header.jsx。他们使用jsx扩展有什么具体原因吗？我以为我的方式是常规的，但是既然Google做的框架，我想可能有合理的理由。

Answer 1

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

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

例子：

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

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

Answer 2

除了检测JSX和lints/格式不同的编辑器/插件之外，没有实际的功能差异。有些人使用的标准是。js文件应包含与标准js相同的内容。JSX显然不能作为普通的JS文件工作，所以您使用。jsx来象征这一点，并让其他开发人员知道。