ReactJS-.JS与.JSX

211

在工作时，我感到有些困惑React。

互联网上有很多示例，它们使用.js具有React的文件，但还有许多其他示例使用.jsx文件。

我已阅读过有关.jsx文件的信息，据我了解，它们只是让您在文件中编写html标签javascript。但是同样的事情也可以写在.js文件中。

那么究竟是什么这两个分机之间的实际差异.js和.jsx？

reactjs jsx

— 困惑的开发者
source

171

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

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

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

— 亨里克·安德森（Henrik Andersson）
source

6

不错的链接！对我来说，这次讨论也很有趣！

— 费利佩·奥古斯托

1

说得好。JSX既不是JS也不是HTML，因此给它自己的扩展名有助于表明它是什么-即使.jsx不是必须的

— -STW

35

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

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

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

— Marpme
source

27

JSX标签（<Component/>）显然不是标准的javascript，<script>例如，如果将它们放在裸标签中，则没有特殊含义。因此，包含它们的所有React文件都是JSX而不是JS。

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

无论如何，存在歧义的原因是因为最终扩展名并不重要，因为编译器只要实际上是JSX，便会愉快地压缩任何类型的文件。

我的建议是：不要担心。

— 莱蒂奥
source

甚至var elem = <div>Text</div>;不是标准的html元素；它不支持appendChild，classList并且可能不支持其他html功能。如果您想直接在javascript中使用html标签，最好将模板文字（反引号`）与innerHtml或一起使用outerHtml。

— 战略思想家

7

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

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

— 加布里埃尔·瓦西里（Gabriel Vasile）
source

通过将以下内容添加到settings.json中"emmet.includeLanguages": { "javascript": "javascriptreact" }，可以在Visual Studio Code中将Emmet用于.js文件：但是，是的，我同意JSX代码应尽可能使用.jsx扩展名。

— Thomas Higginbotham

6

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

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

— 西阿瓦什
source

4

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

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

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

— 马吉德·埃勒泰耶（Majid Eltayeb）
source