当涉及到文件扩展名时，没有。你的捆绑器/转译器/任何东西负责解决文件内容的类型。

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

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

为什么JSX ? React包含了这样一个事实，即呈现逻辑本质上是与其他UI逻辑耦合的:事件如何处理，状态如何随时间变化，以及如何准备数据以显示。

React没有通过将标记和逻辑放在单独的文件中人为地分离技术，而是使用包含两者的松散耦合单元(称为“组件”)来分离关注点。我们将在后面的部分中回到组件，但如果你还不习惯在JS中放置标记，这篇文章可能会说服你。

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

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

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

因为react只是一个javascript库，所以你在JSX和JS之间选择没有区别。它们是完全可以互换的!

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

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

我想带来另一种期望，即在创建组件时将文件创建为.jsx。

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

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

它说,

const element = <h1>Hello, world!</h1>; It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

它的意思是，它不是强制性的，但你可以考虑用'来创建表示组件。jsx'，因为它实际上绑定了UI的道具。容器组件，如.js文件，包含获取数据的逻辑。

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

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

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

在任何情况下，存在模糊性的原因是，最终扩展并不重要，因为转译器乐于咀嚼任何类型的文件，只要它们实际上是JSX。

我的建议是:别担心。

当涉及到文件扩展名时，没有。你的捆绑器/转译器/任何东西负责解决文件内容的类型。

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

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