React 文件命名规范转换为 jsx

Question

我是React的新手。最初我开始使用create-react-app。默认情况下文件名是index.js。然后我将该文件重命名为index.jsx。

当我尝试使用npm start启动应用程序时，我会收到以下错误。

> react-scripts start

Could not find a required file.
  Name: index.js
  Searched in: D:\WorkSpace\React\chat\src

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Applns\\nodejs\\node.exe" "D:\\Applns\\nodejs\\node_modules\\
npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! chat@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chat@0.1.0 start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the chat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:

如何解决这个问题。我该如何使node接受jsx文件。

- Shamnad P S

Answer 1

将 index.jsx 重命名为 index.js，因为我正在使用 create-react-app，这样它就可以正常工作了。

- Naveed Aheer

---

ReactJS 组件需要以 .jsx 文件形式存在，对吗？这是标准吗？ - Shamnad P S

Answer 2

正如@KeithA提到的那样 - 您需要进行额外的配置。在您的webpack.config.js文件中的resolve对象中：

resolve: {
 ///...some other configurations will go here ...

  extensions: [ "", ".js", ".jsx" ]
},

- kurumkan

Answer 3

另一个文件正在导入具有该扩展名的文件。扩展名已更改，因此查找将失败。此外，React不需要文件具有.jsx才能工作。因此，只需简单地切换文件扩展名即可解决问题。我从未使用过create-react-app，但如果您想让它与.jsx一起工作，您很可能需要在其默认配置之上进行一些其他配置。我建议查看相关文档。

- KA01

---

ReactJS组件需要放在.jsx文件中，是一种标准吗？ - Shamnad P S

这并不是必须的，但有些人更喜欢它。另一些人认为jsx转换只是文件发生的多项变换之一，以使其成为可在浏览器中运行的有效javascript，因此因此不应该因为这个而将文件命名不同。我个人没有特别强烈的感觉，但通常只使用.js文件，这样如果需要添加一些jsx语法，则无需稍后更改。 - Michael Peyper