如何在由 create-react-app 创建的应用程序中使用 jsx 文件（不运行“npm runeject”）？

Posted 2023-02-24

【中文标题】如何在由 create-react-app 创建的应用程序中使用 jsx 文件（不运行“npm runeject”）？

【英文标题】：How to use jsx files in an app created by create-react-app (without run "npm run eject")?

【发布时间】：2019-10-23 20:03:21

【问题描述】：

目前我只能使用 .js 文件，万一我尝试使用 .jsx 会导致错误。问题来了：我平时使用代码格式化器，在js文件中写jsx和格式化，会导致代码完全乱序，也会导致语法错误。

我是 React 新手，所以我不知道如何配置以使用 jsx 文件，至少在除主文件 (index.js) 之外。

我已经看到了弹出脚本，但使用它似乎有一些缺点。

在不运行“npm runeject”的情况下使用jsx文件有什么解决方案吗？

编辑：错误类似于“无法从 filename.js 导入 XXX 文件”，也就是说，当我尝试从 filename.jsx 文件导入时，它只搜索 filename.js 文件，并且在那里是没有文件。 js，我不在乎。

EDIT2：正如评论中所说，只需重新启动服务器，我想当服务器已经运行时我正在从 js 更改为 jsx，现在我已经更改并重新启动，它似乎正在工作

【问题讨论】：

你为什么要使用 jsx 文件？

什么错误？是编辑器的警告还是程序错误？请查看您的控制台。

@Robin，请阅读编辑

你有哪个版本的react-scripts？

我尝试了全新安装并且开箱即用，如果我在服务器运行时重命名文件的扩展名，我得到一个错误，但在重新启动服务器后再次工作，即使我混合.jsx 和.js 文件

【参考方案1】：

.jsx 开箱即用，可与 create react 应用一起使用。

您在服务器运行时更​​改扩展名，因此服务器认为您正在引用一个不再存在的文件，因为它最初将文件解析为 .js 并保留该扩展名，就像删除一个文件并尝试导入它，显示相同的错误，重新启动服务器，一切都应该按预期工作。

【讨论】：

不敢相信这是解决方案。 重启服务器

经典计算机解决方案重启服务器：D

为什么 create-react-app 不从一开始就创建带有 jsx 扩展的 App.js 和 index.js？测试文件也一样。