在编写返回 jsx 的脚本时使用 .js 文件扩展名

Question

我开始使用 React 作为我选择的 ui 框架。在我浏览文档时，我注意到，当使用

create-react-app

脚本启动新的反应样板时，他们在返回

.js

代码的脚本上使用了

jsx

文件扩展名。当我问我的朋友时，他告诉我你应该在返回此类代码的脚本上使用

.jsx

扩展。

我在这里有点迷失，好像两者都有效，使用

.js

扩展不是更好吗，就像我们编写的 javascript 一样。

请帮助我了解最佳实践。 （我有点感觉应该在这些类型的脚本上使用

.jsx

扩展，但我很想听听社区对此的看法）

提前致谢:)

Answer 1

这完全取决于个人喜好。

我个人的观点是JavaScript就是JavaScript，我只是使用

.js

。其他人会更喜欢在 JSX 文件中使用

.jsx

，而在实用程序等文件中使用

.js

，以进行区分。唯一重要的事情是无论你选择什么都要保持一致（至少在一个项目中）。

一般来说，没有什么关系。

唯一真正重要的时间取决于您的构建管道。某些构建管道可能会配置为编译

.js

和

.jsx

，其规则略有不同，但这将基于您的应用程序（诸如

create-react-app

之类的内容无关）。

最终，您可以使用

.cookiemonster

扩展，它会工作得很好（只要您的构建管道配置为处理它）。

Answer 2

其实没关系，由你来决定当我返回 HTML 和 JS 之间的混合时我更喜欢使用

.jsx

，而仅当我使用纯 JS 或 ES6 时才使用

.js

。

我建议您阅读 github 上的这个问题。

Answer 3

当然两者都可以，但我建议区分 .js 文件和 .jsx 文件，并使用 .jsx 进行 React/etc。
为什么？首先，jsx在浏览器的标准javascript执行环境中会出错，因为标准javascript不理解各种html/xml片段。 因为我们正在转译代码，所以您可以让它运行，但 .jsx 实际上并不打算合并到 ecmascript 或浏览器 javascript 中。

• jsx在标准js浏览器执行环境下会报错
• .jsx 文件扩展名已经非常完善，不妨利用额外的特异性
• 当您有一个 Web 应用程序时，运行非 React、非 jsx 脚本有时会很有用。如果您使用 .js 作为 React 和 jsx 执行文件，则无法再分配 .js 扩展名来明确调用浏览器 JavaScript 兼容文件。