扩展“jsx”究竟做了啥？ [复制]

Posted 2023-02-21

【中文标题】扩展“jsx”究竟做了啥？ [复制]

【英文标题】：What does extension "jsx" do exactly? [duplicate]扩展“jsx”究竟做了什么？ [复制]

【发布时间】：2019-02-15 09:40:29

【问题描述】：

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

import Header from "components/Header";

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

【问题讨论】：

jsx 扩展名是指包含一些jsx 代码的文件，例如<Header/>，实际上是React.createElement 的快捷方式。 jsx 扩展名不是强制性的，如果您的构建系统正确配置为使用正确的babel plugins 编译.js 文件，您可以在.js 文件中编写jsx 代码。我认为拥有.jsx 是一个好点，因为您（和您的 IDE）知道这些文件包含 JSX 代码

【参考方案1】：

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

【参考方案2】：

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

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

例子：

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

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