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

我有一个React项目，其中一切正常，直到我将App.js的扩展名从components文件夹更改为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"))

我在这里读到这些扩展是完全可交换的。如何配置transpiler

---

那么，为什么会发生此错误？

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

---

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

您可以添加包json的

start

部分吗。这是一个Create React应用程序吗？是的，这个Create React apppost your index.js在

index.js

中的导入是什么样子的？我认为

index.js

导入意味着默认为

App.js

的.js扩展名。因此，当仅为

App.js

文件导入时，请指定扩展名

.jsx

。虽然您本身没有错，但这并不是问题的答案。当我回答时，问题没有更新更多详细信息。）

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