Question

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

import Header from "components/Header";

我最近开始使用Material-UI，并发现它们在框架中成为组件的方式有所不同。他们创建了一个具有相同名称Header的文件夹，但是将Header.jsx放入了该文件夹中。他们使用jsx扩展名是否有特定原因？我认为我的做法很传统，但是由于Google建立的框架，我认为可能有合理的理由。

Answer 1

除了可能以不同方式检测JSX和皮棉/格式的编辑器/插件外，没有实际的功能差异。有些人使用.js文件应包含可作为标准普通JS内容的标准。 JSX显然不能用作普通的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

扩展名“ jsx”的作用是什么？

2 个答案: