将文件命名约定为 jsx

Posted 2023-02-21

【中文标题】将文件命名约定为 jsx

【英文标题】：React File naming convention to jsx

【发布时间】：2017-09-28 12:31:26

【问题描述】：

我是新来的反应。最初我开始使用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:

如何解决这个问题。如何让节点获取 jsx 文件。

【参考方案1】：

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

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

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

【参考方案2】：

重命名 index.js 而不是 index.jsx 它将正常工作，因为我正在使用 create-eact-app

【讨论】：

ReactJS 组件需要在 .jsx 文件中，对吧？作为标准？

【参考方案3】：

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

【讨论】：

ReactJS 组件需要在 .jsx 文件中，对吧？作为标准？

这不是必需的，但有些人更喜欢它。其他人则认为jsx 转换只是文件上发生的转换之一，以使其成为可以在浏览器中运行的有效 javascript，因此因此以不同的方式命名文件没有意义。无论哪种方式，我个人都没有任何强烈的感觉，但通常只使用 .js 文件，因此如果需要添加一些 jsx 语法，我不需要稍后更改它。