在React.js中工作时,有一些事情让我感到非常困惑。

在互联网上有很多使用.js文件的React的例子,但也有很多人使用.jsx文件。

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

那么。js和。jsx之间的实际区别是什么呢?


当前回答

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

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

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

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

其他回答

根据IDE或编辑器的不同,.jsx有不同的文件图标:P。不阅读代码就知道它是什么文件是一个很好的实践。捆绑器和编译器可能知道它,并会处理所有的事情,但是仅从文件名来区分.jsx和.js之间的区别将对开发人员有很大帮助。

编辑:jsx不仅仅是js,它是javascript + xml,它允许你在js文件中编写html而不使用模板字符串。出于这个原因,使用. jsx代替.js(这也是有效的)是一个很好的实践。

当涉及到文件扩展名时,没有。你的捆绑器/转译器/任何东西负责解决文件内容的类型。

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

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

正如其他人提到的,JSX不是一个标准的Javascript扩展。最好基于.js命名应用程序的入口点,对于其他组件,您可以使用.jsx。

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

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

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

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

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

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

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