ReactJS - .JS vs .JSX

Question

在使用 React.js 进行开发时，有一点令我很困惑。

网上有很多使用 .js 文件和 React 一起使用的例子，但也有很多例子使用了 .jsx 文件。

我已经阅读了关于 JSX 文件的介绍，我的理解是它们只是让你在 JavaScript 中写入 HTML 标签。但同样的内容也可以在 JS 文件中编写。

那么 .js 和 .jsx 之间的实际区别是什么？

- ConfusedDeveloper

---

这并不会有任何区别，但是如果你是一个擅长编写清晰代码的人，可以遵循 Airbnb 编码风格，该风格建议使用 .jsx。https://github.com/airbnb/javascript/tree/master/react#basic-rules - James Bissick

Answer 1

在文件扩展名方面没有任何限制，你的打包器/转译器/等等会处理内容类型的解析。

然而，在决定将什么内容放入 .js 或 .jsx 文件类型时，还有一些其他的考虑因素。由于 JSX 不是标准 JavaScript，因此可以认为任何不是 "纯" JavaScript 的东西都应该使用其自己的扩展名，比如 .jsx 用于 JSX，.ts 用于 TypeScript 等。

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

- Henrik Andersson

---

好的链接！对我来说，这个讨论也很有意思！ - Felipe Augusto

说得好。JSX既不是JS也不是HTML，所以给它自己的扩展名有助于表明它的特性——即使使用.jsx并不是必须的。 - STW

在Babel出现之前，.js文件和.jsx文件之间的区别很有用，但现在已经不那么有用了。 - mercury

Answer 2

在大多数情况下，只需要转换器/打包程序，它可能没有配置用于处理JSX文件，而是使用JS！因此，您被迫使用JS文件而不是JSX。

由于React仅仅是JavaScript库，因此在JSX和JS之间选择对您来说没有任何区别。它们完全可以互换！

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

- marpme

Answer 3

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

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

无论如何，存在歧义的原因是扩展名实际上并不重要，因为转换器愉快地处理任何类型的文件，只要实际上它们是JSX即可。

我的建议是：不要担心。

- jlaitio

---

即使 var elem = <div>Text</div>; 不是标准的 HTML 元素, 它不支持 appendChild, classList 和其他 HTML 功能。如果你想要在 JavaScript 中使用 HTML 标签，最好使用模板字面值（反引号\``）与 innerHtml或outerHtml` 一起使用。 - Strategy Thinker

Answer 4

正如其他人提到的，JSX不是标准的JavaScript扩展名。最好根据.js命名您的应用程序入口点，并对其余组件使用.jsx。

我有一个重要的原因，为什么我在所有组件文件名中使用.JSX。 实际上，在大型项目中，如果我们将所有React组件设置为.jsx扩展名，那么在浏览跨项目的不同javascript文件（例如helpers，middleware等）时，这将更容易识别此文件是React组件而不是其他类型的javascript文件。

- Siavash

---

如果您正在使用 VS Code，.jsx 文件具有不同的文件图标。 - Ahmad Moghazi

Answer 5

如前所述，如果您创建一个带有.jsx或.js扩展名的文件，它们之间没有区别。 我想介绍一下在创建组件时使用.jsx的另一个方面。 这并不是强制性的，但可以遵循的一种架构方法。因此，在大型项目中，我们将组件分为Presentation和Container组件。简而言之，在Container组件中，我们编写获取组件数据并使用props渲染Presentation组件的逻辑。在Presentation组件中，我们通常不编写功能逻辑，Presentation组件用于表示具有所需props的UI。 因此，如果您查看React文档中JSX的定义，它说：

 const element = <h1>Hello, world!</h1>;

JSX是JavaScript的语法扩展，推荐与React一起使用来描述UI外观。JSX可能会让你想起模板语言，但它拥有JavaScript的全部功能。

JSX生成React“元素”。React通过名为“组件”的松耦合单位将标记和逻辑分开，而不是通过将标记和逻辑放在单独的文件中人为地分离技术。

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

这意味着并非强制性使用JSX，但你可以考虑创建带有'.jsx'的表示层组件，因为它可以将属性绑定到UI上，而将包含逻辑以获取数据的容器组件作为.js文件。

在创建.jsx或.js文件时，这是您可以遵循的约定，以逻辑上和物理上分离代码。

- KushalSeth

Answer 6

除了提到的JSX标签不是标准JavaScript之外，我使用.jsx扩展名的原因是因为它可以在编辑器中继续使用Emmet - 你知道吗，那个有用的插件可以扩展HTML代码，例如ul>li。

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

- Gabriel Vasile

---

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

Answer 7

JSX不是标准JavaScript，根据Airbnb样式指南，'eslint'可以考虑这种模式。

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

提醒一下，如果你的文件名为MyComponent.jsx，它会通过检查，除非你编辑了eslint规则。你可以在这里查看样式指南。

- Majid Eltayeb

Answer 8

如果您使用.jsx，它将被视为React页面，因此其功能将自动应用于扩展。例如，如果您在.jsx文件中使用Emmet，则.container将创建一个具有className而不是class的div。

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

如果您在js文件中应用相同的Emmet，则会得到以下结果：

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

- Yilmaz

Answer 9

来源： https://reactjs.org/docs/introducing-jsx.html

为什么使用JSX？ React认为渲染逻辑与其他UI逻辑密切相关：如何处理事件、如何随时间变化状态以及如何准备数据供显示。

React通过称为“组件”的松散耦合单元来分离关注点，而不是通过将标记和逻辑放在单独的文件中人工地分离技术。我们将在后面的章节中回到组件，但如果您还不习惯将标记放入JS中，此讲话可能会使您改变看法。

React不需要使用JSX，但大多数人发现在JavaScript代码中使用JSX作为可视化辅助工具非常有帮助。它还允许React显示更有用的错误和警告消息。

- MertHaddad

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Someone_who_likes_SE

这句话是关于JSX的一般性描述，不回答关于.js和.jsx文件扩展名的问题。 - Welcor

Answer 10

根据不同的IDE或编辑器，.jsx有不同的文件图标:P。知道文件类型而不必阅读代码是一个好习惯。打包工具和编译器可能会知道这一点，并且会处理所有事情，但仅从文件名区分.jsx和.js将对您作为开发人员有很大帮助。

编辑：jsx不仅仅是js，它是javascript + xml，允许您在js文件中编写html而无需使用模板字符串。因此，使用.jsx作为您的React文件而不是.js（也是有效的）是一个好习惯。

- arianit ax