我是否必须使用jsx扩展名保存react组件文件

Question

我已经写了几个月的反应,我刚刚意识到我的一些文件有.js扩展,而其他文件有.jsx扩展.当我写jsx的.js文件,一切仍然有效.延伸是什么重要吗？

顺便说一句(对于上下文),我正在使用webpack生成一个bundle.js文件.这有什么影响吗？

Answer 1

不使用.js或.jsx并不重要,因为你有webpack/babel来传播一切.真正的主要区别在于当你导入文件时,你必须包含jsx文件的.jsx扩展名,如果它只是一个js文件,你可以放置文件名.例如:'./ file.jsx'中的导入文件与来自'./file'的导入文件

Answer 2

不,扩展名是什么并不重要.

与Babel捆绑的JSX转换器(我假设您正在使用Webpack)遍历监视目录中的每个文件,并且只转换那些与JSX语法匹配的段.

您的所有文件都将在相应的构建目录中复制,或者 - 在本例中 - 将复制到您的Webpack包中.转换器能够区分常规Javascript和JSX,并且不会对前者进行更改.

.jsx无论如何使用它仍然是一种好习惯,因此对人类来说很清楚.

Answer 3

如前所述，从技术上讲，这无关紧要。

但是，尤其是在协作项目方面，查看Airbnb React/JSX 样式指南可能会很有趣，其中提到：

扩展：对 React 组件使用 .jsx 扩展。