我是不是必须保存带有 jsx 扩展名的反应组件文件

Posted

技术标签:

【中文标题】我是不是必须保存带有 jsx 扩展名的反应组件文件【英文标题】:Do I have to save react component files with a jsx extension我是否必须保存带有 jsx 扩展名的反应组件文件 【发布时间】:2016-08-22 05:48:27 【问题描述】:

我已经写了几个月的 react 了,我才意识到我的一些文件有 .js 扩展名,而其他文件有 .jsx 扩展名。当我在.js 文件中写入jsx 时,一切仍然有效。扩展名是什么重要吗?

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

【问题讨论】:

不使用 .js 或 .jsx 没关系,因为你有 webpack 来转译一切。真正的主要区别是当你导入文件时,你必须为 jsx 文件包含 .jsx 扩展名,如果它只是一个 js 文件,你可以只输入文件名。例如:从 './file.jsx' 导入文件与从 './file' 导入文件 @erichardson30 为什么这不是一个答案?对我来说看起来是正确的,并回答了这个问题。你不想要积分吗?!? Web 包现在可以转换了吗?我以为 babel 是这样做的 react.js - What extension to use - '.jsx' or just '.js'?的可能重复 【参考方案1】:

如前所述,从技术上讲,这并不重要。

但是,特别是在涉及协作项目时,查看 Airbnb React/JSX 样式指南可能会很有趣,其中提到:

扩展:为 React 组件使用 .jsx 扩展。

来源:https://github.com/airbnb/javascript/tree/master/react

【讨论】:

【参考方案2】:

不使用 .js 或 .jsx 无关紧要,因为您有 webpack/babel 来转译所有内容。真正的主要区别是当你导入文件时,你必须为 jsx 文件包含 .jsx 扩展名,如果它只是一个 js 文件,你可以只输入文件名。例如:从 './file.jsx' 导入文件与从 './file' 导入文件

【讨论】:

【参考方案3】:

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

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

您的所有文件都将复制到相应的构建目录中,或者 - 在这种情况下 - 复制到您的 Webpack 包中。转译器能够将常规 Javascript 与 JSX 区分开来,并且不会对前者进行更改。

无论如何,使用.jsx 仍然是一个好习惯,这样就很清楚了 人类。

【讨论】:

以上是关于我是不是必须保存带有 jsx 扩展名的反应组件文件的主要内容,如果未能解决你的问题,请参考以下文章

对 jsx 文件反应 js webpack 捆绑错误

在反应组件中导入分割的css文件

如何使用来自其他文件的反应组件

ReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX

ESLint 验证 JSX 文件

反应路由器不显示jsx