ReactJS -.JS 与.JSX

Question

在React.js中工作时，我发现有些事情非常令人困惑。

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

我读过JSX文件，我的理解是它们只是让您在JavaScript中编写HTML标记。 但是同样的东西也可以写在JS文件中。

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

Answer 1

没有涉及文件扩展名。 您的捆绑器/转译器/任何负责解决文件内容类型的问题。

然而，在决定将什么放入.js或.jsx文件类型时，还有一些其他的考虑因素。 由于 JSX 不是标准的 JavaScript，人们可能会争辩说，任何不是“普通”JavaScript 的东西都应该进入它自己的扩展名， .jsx ，JSX 的.jsx和 TypeScript 的.ts 。

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

Answer 2

在大多数情况下，它只需要转译器/捆绑器，它可能未配置为与 JSX 文件一起使用，而是与 JS 一起使用！ 所以你被迫使用 JS 文件而不是 JSX。

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

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

Answer 3

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

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

在任何情况下，之所以存在歧义是因为最终扩展名并不重要，因为只要它们实际上是 JSX，转译器就会愉快地咀嚼任何类型的文件。

我的建议是：别担心。

Answer 4

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

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

Answer 5

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

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

Answer 6

JSX 不是标准的 JavaScript，基于 Airbnb 风格指南 'eslint' 可以考虑这种模式

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

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

Answer 7

如前所述，如果您使用.jsx或.js创建文件，则没有区别。

我想在创建组件时将文件创建为.jsx另一个期望。

这不是强制性的，而是一种我们可以遵循的架构方法。 因此，在大型项目中，我们将组件划分为 Presentational 组件或 Container 组件。 简而言之，在容器组件中，我们编写逻辑来获取组件的数据并使用 props 渲染 Presentational 组件。 在展示组件中，我们通常不编写功能逻辑，展示组件用于表示具有所需道具的 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 ，以便在逻辑上和物理上分离代码。

Answer 8

为什么是 JSX？ React 接受了渲染逻辑与其他 UI 逻辑固有耦合的事实：如何处理事件、状态如何随时间变化以及数据如何准备显示。

React 不是通过将标记和逻辑放在单独的文件中来人为地分离技术，而是使用包含两者的称为“组件”的松散耦合单元来分离关注点。 我们将在下一节中回到组件，但如果您还不习惯在 JS 中放置标记，那么这篇演讲可能会让您信服。

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

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

Answer 9

根据 IDE 或编辑器的不同， .jsx具有不同的文件图标：P。 不看代码就知道是什么文件是个好习惯。 打包器和编译器可能知道并会处理所有事情，但仅从文件名中区分.jsx和.js将对开发人员有很大帮助。

编辑：jsx 不仅仅是 js，它是 javascript + xml，它允许您在不使用模板字符串的情况下在 js 文件中编写 html。 出于这个原因，最好使用.jsx作为你的 React 文件，而不是.js （这也是有效的）。

Answer 10

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

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

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

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