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

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

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

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

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

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

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

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

如前所述，如果用.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标签不是标准的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(这也是有效的)是一个很好的实践。