我啥时候应该特别使用 .jsx 和 .js？

Posted 2023-02-21

【中文标题】我啥时候应该特别使用 .jsx 和 .js？

【英文标题】：When should I use .jsx and .js particularly?我什么时候应该特别使用 .jsx 和 .js？

【发布时间】：2021-04-25 12:57:51

【问题描述】：

我有一个 React 项目，其中 一切都运行良好，直到我从 组件更改了 App.js 的扩展名 文件夹到 App.jsx

这是文件夹的截图：

当我运行npm start 时，出现以下错误：

Error: ENOENT: no such file or directory, open 'D:\phone\src\components\App.js'

index.js

import ReactDOM from "react-dom"
import App from "./components/App"
ReactDOM.render(<App />, document.getElementById("root"))

package.json

      ...
      "scripts": 
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      ,
      ...

我在这里读到https://***.com/a/46169636/12611597 这些扩展是完全可互换的。如何配置转译器？

那么为什么会出现这个错误呢？

【问题讨论】：

你能在你的包json中添加start部分吗？这是一个 Create-React-App 吗？

是的，这个 create-react-app

发布你的 index.js

index.js 中的导入是什么样的？

我认为index.js 导入意味着默认为App.js 的.js 扩展名。因此，当只为App.js 文件导入时，请指定扩展名.jsx。

【参考方案1】：

错误：ENOENT：没有这样的文件或目录，打开 'D:\phone\src\components*App.js*'

删除 .js 部分，它应该可以工作。这有点个人化，但作为一个好习惯，如果您使用的是 jsx 文件，则可以编写 .jsx ，如果是 javascript 模块，则可以编写 .js 。一些代码编辑器强迫你编写 jsx（例如 webstorm），如果你使用 typescript，那么你已经必须指定 .tsx 和 .ts 扩展名。说得更简单，如果从组件返回 jsx，则使用 .jsx，如果是 javascript 文件，则使用 .js。并且在导入期间不要指定扩展名。

【讨论】：

虽然你本身没有错，但这不是问题的答案。

当我回答时，问题没有更新更多细节）