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

问题描述

我有一个 React 项目，其中一切正常，直到我从 components 更改了 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://stackoverflow.com/a/46169636/12611597 这些扩展是完全可以互换的。如何配置转译器？

为什么会出现这个错误？

解决方法

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

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