在文件扩展名方面没有。您的捆绑器/转译器/任何东西负责解决存在的文件内容类型。

但是，在决定将什么放入 .js 或 .jsx 文件类型时，还有一些其他注意事项。由于 JSX 不是标准的 JavaScript，人们可能会争辩说，任何不是“普通” JavaScript 的东西都应该进入它自己的扩展，例如，.jsx 用于 JSX，.ts 用于 TypeScript。

有一个good discussion here available for read

---

在大多数情况下，它只需要转译器/捆绑器，它可能未配置为与 JSX 文件一起使用，而是与 JS 一起使用！所以你不得不使用 JS 文件而不是 JSX。

而且由于 react 只是一个 javascript 库，因此您在 JSX 或 JS 之间进行选择没有区别。它们完全可以互换！

在某些情况下，由于代码突出显示，用户/开发人员也可能会选择 JSX 而不是 JS，但大多数较新的编辑器也在 JS 文件中正确查看反应语法。

---

JSX 标记 (<Component/>) 显然不是标准的 javascript，如果将它们放在裸 <script> 标记中，则没有特殊含义。因此，所有包含它们的 React 文件都是 JSX 而不是 JS。

按照惯例，React 应用程序的入口点通常是 .js 而不是 .jsx，即使它包含 React 组件。它也可以是 .jsx。任何其他 JSX 文件通常具有 .jsx 扩展名。

无论如何，存在歧义的原因是因为最终扩展名并不重要，因为只要它们实际上是 JSX，转译器就会愉快地咀嚼任何类型的文件。

我的建议是：不要担心。

---

正如其他提到的，JSX 不是标准的 Javascript 扩展。最好根据 .js 命名应用程序的入口点，其余组件可以使用 .jsx。

我之所以使用 .JSX 作为所有组件的文件名，有一个重要原因。实际上，在一个包含大量代码的大型项目中，如果我们将所有 React 的组件都设置为 .jsx 扩展名，那么在导航到整个项目中的不同 javascript 文件（如帮助程序、中间件等）时会更容易，而你知道这是一个 React 组件，而不是其他类型的 javascript 文件。

---

如前所述，如果您使用 .jsx 或 .js 创建文件，则没有区别。

我希望在创建组件时将文件创建为 .jsx。

这不是强制性的，而是我们可以遵循的架构方法。因此，在大型项目中，我们将组件划分为展示组件或容器组件。简而言之，在容器组件中，我们编写逻辑来获取组件的数据并使用 props 渲染 Presentational 组件。在展示组件中，我们通常不编写功能逻辑，展示组件用于表示带有所需道具的 UI。

因此，如果您在 React documents 中检查 JSX 上的定义。

它说，

const element =

你好，世界！

;它被称为 JSX，它是 JavaScript 的语法扩展。我们建议将它与 React 一起使用来描述 UI 应该是什么样子。 JSX 可能会让您想起模板语言，但它具有 JavaScript 的全部功能。 JSX 产生 React “元素”。 React 不是通过将标记和逻辑放在单独的文件中来人为地分离技术，而是使用包含两者的松散耦合单元（称为“组件”）来分离关注点。 React 不需要使用 JSX，但大多数人发现在 JavaScript 代码中使用 UI 时，它作为一种视觉辅助很有帮助。它还允许 React 显示更多有用的错误和警告消息。

这意味着，这不是强制性的，但您可以考虑使用“.jsx”创建演示组件，因为它实际上将道具与 UI 绑定。和容器组件，因为 .js 文件包含获取数据的逻辑。

这是您在创建 .jsx 或 .js 文件时可以遵循的约定，以在逻辑上和物理上分离代码。

---

除了提到的 JSX 标签不是标准 javascript 的事实之外，我使用 .jsx 扩展名的原因是因为 Emmet 仍然可以在编辑器中工作 - 你知道，那个有用的插件可以扩展 html 代码，例如 ul>li into

<ul>
  <li></li>
</ul>

---

JSX 不是标准 JavaScript，基于 Airbnb 样式指南 'eslint' 可以考虑这种模式

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

作为警告，如果您将文件命名为 MyComponent.jsx，它将通过，除非您编辑 eslint 规则，否则您可以查看样式指南 here

---

为什么选择 JSX？ React 包含渲染逻辑与其他 UI 逻辑固有耦合的事实：如何处理事件，状态如何随时间变化，以及如何准备数据以供显示。

React 不是通过将标记和逻辑放在单独的文件中人为地分离技术，而是使用包含两者的松散耦合单元（称为“组件”）来分离关注点。我们将在下一节中回到组件，但如果您还不习惯在 JS 中添加标记，那么本次演讲可能会让您信服。

React 不需要使用 JSX，但大多数人发现在 JavaScript 代码中使用 UI 时，它作为一种视觉辅助很有帮助。它还允许 React 显示更多有用的错误和警告消息。

有关更多信息，请查看有关 JSX 的 React 文档。 https://reactjs.org/docs/introducing-jsx.html

---