没有涉及文件扩展名。您的捆绑器/转译器/任何负责解决文件内容类型的问题。

然而，在决定将什么放入 a.js或.jsx文件类型时，还有一些其他考虑因素。由于 JSX 不是标准的 JavaScript，人们可能会争辩说，任何不是“普通”JavaScript 的东西都应该进入它自己的扩展，例如，.jsx对于 JSX 和.tsTypeScript。

这里有一个很好的讨论可供阅读

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

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

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

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

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

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

我的建议是：别担心。

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

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

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

我想.jsx在创建组件时带来另一个创建文件的期望。

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

所以，如果你检查React 文档中JSX 的定义。

它说，

 const element = <h1>Hello, world!</h1>;

它被称为 JSX，它是 JavaScript 的语法扩展。我们建议将它与 React 一起使用来描述 UI 应该是什么样子。JSX 可能会让您想起模板语言，但它具有 JavaScript 的全部功能。

JSX 产生 React “元素”。React 不是通过将标记和逻辑放在单独的文件中来人为地分离技术，而是将关注点与松散耦合的单元分开，称为“组件”，其中包含两者。

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

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

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