如果你使用.jsx，它将被视为一个react页面，因此它的功能将被扩展自动应用。例如，如果你在.jsx文件中使用emmet， .container，这将创建一个className而不是class的div

    <div className="container"></div>

如果你在js文件中应用相同的emmet，你会得到这个:

    <div class="container"></div>

如前所述，如果用.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文件时可以遵循的约定，在逻辑上和物理上分离代码。

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

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

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

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

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

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

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

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

我的建议是:别担心。

根据IDE或编辑器的不同，.jsx有不同的文件图标:P。不阅读代码就知道它是什么文件是一个很好的实践。捆绑器和编译器可能知道它，并会处理所有的事情，但是仅从文件名来区分.jsx和.js之间的区别将对开发人员有很大帮助。

编辑:jsx不仅仅是js，它是javascript + xml，它允许你在js文件中编写html而不使用模板字符串。出于这个原因，使用. jsx代替.js(这也是有效的)是一个很好的实践。