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

Question

我有一个 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://stackoverflow.com/a/46169636/12611597 这些扩展是完全可互换的。如何配置转译器？

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

Answer 1

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

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