ReactJS - .JS vs .JSX

Question

在工作中我发现有些令人困惑的事情React.

互联网上有很多可以使用.js反应的文件但很多其他人使用.jsx文件的例子.

我读过有关.jsx文件的内容,我的理解是他们只是让你在你的文件中写下html标签javascript.但同样的事情也可以写在.js文件中.

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

Answer 1

文件扩展名没有.您的bundler/transpiler /无论是什么类型的文件内容解析.

但是,在决定放入文件类型.js或.jsx文件类型时,还有一些其他注意事项.由于JSX不是标准的JavaScript,因此可以说任何不是"普通"JavaScript的东西都应该进入它自己的扩展,例如,.jsx对于JSX和.tsTypeScript.

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

Answer 2

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

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

Answer 3

在大多数情况下,它只需要转换器/捆绑器,它可能不配置为使用JSX文件,但使用JS!所以你被迫使用JS文件而不是JSX.

而且由于react只是一个javascript库,因此在JSX或JS之间进行选择没有任何区别.它们完全可以互换!

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

Answer 4

JSX标签(<Component/>)显然不是标准的javascript,如果你把它们放在一个裸<script>标签中没有特殊意义.因此,包含它们的所有React文件都是JSX而不是JS.

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

在任何情况下,存在歧义的原因是因为最终扩展并不重要,因为只要它们实际上是JSX,转换器就会愉快地咀嚼任何类型的文件.

我的建议是:不要担心.

Answer 5

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

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

Answer 6

如前所述，如果您使用.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文件时可以遵循的约定，以在逻辑上和物理上分隔代码。

Answer 7

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

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

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