ReactJS-.JS与.JSX

JSX不是标准的JavaScript，根据Airbnb样式指南“ eslint”可以考虑采用这种模式

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

作为警告，如果您将文件命名为MyComponent.jsx，它将通过，除非您编辑eslint规则，您可以在此处查看样式指南

在大多数情况下，只需要Transpiler / bundler，可能未配置为与JSX文件一起使用，而与JS一起使用！因此，您不得不使用JS文件而不是JSX。

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

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

除了提到的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，便会愉快地压缩任何类型的文件。

我的建议是：不要担心。

正如其他提到的那样，JSX它不是标准的Javascript扩展。最好基于来命名Application的入口点，.js对于其余组件，可以使用.jsx。

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

文件扩展名没有。打包器/编译器/无论做什么，都将负责解决存在的文件内容类型。

但是，在确定要放入文件.js或.jsx文件类型中的内容时还需要考虑其他一些因素。由于JSX不是标准的JavaScript，因此可以说，任何非“普通” JavaScript的内容都应加入自己的扩展名，例如.jsxJSX和.tsTypeScript。

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