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

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

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

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

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

我的建议是:别担心。

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

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

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

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

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

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

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

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

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

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

正如其他人提到的，JSX不是一个标准的Javascript扩展。最好基于.js命名应用程序的入口点，对于其他组件，您可以使用.jsx。

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