reactJS中的文件命名约定？答案

【问题标题】：File naming conventions in reactJS?reactJS中的文件命名约定？
【发布时间】：2022-03-15 17:00:03
【问题描述】：

最近，我开始学习 ReactJS。唯一让我感到困惑的是在 React 应用目录中命名文件夹和文件。

要命名组件文件，有人关注TitleCase.js，有人关注camelCase.js。
要命名应用目录，很少有人关注camelCase，也很少有人关注 smallcase 或 small-case。

我试图找到有关命名约定的官方文档，但找不到。有人可以帮我找到在 ReactJS 中命名文件的正确方法吗？

【问题讨论】：

没有什么可以称为完美或最好的文件命名方式，这完全取决于您，但您可以按照以下方式操作：github.com/airbnb/javascript/tree/master/react
如果你不使用 jsx 那么你在使用什么？你可以遵循这些约定，它们基本上是针对 reactjs 的。
如上所述，没有“正确”的方法可以做到这一点。但是，由于组件本质上总是在代码中以TitleCase 编写，所以我不明白为什么不将文件也用于文件。因为然后你像import Component from './Component' 一样导入。至于文件夹，我认为规范是smallcase。
组件文件的TitleCase 是最好的，因为它可以让您知道其他camelCase 文件正在导出组件以外的其他内容。
React 对此并不固执己见。使用最适合您的。由于我们大多数人使用基于 npm 的项目，我们倾向于在结构上遵循正常的 npm 指南。您还可以从 git 和 vscode 等工具中获得提醒，这些工具更喜欢小写名称而不是混合大小写。所以任何选择都来自其他东西的结果，而不是 React。

标签： reactjs

【解决方案1】：

关于命名约定，ReactJS 没有意见。

没有关于您提出的问题的官方指南或声明。您也不会在文档中找到它们。

这是个人（团队）偏好。如果您难以执行，您可以坚持使用 Airbnb's mostly reasonable approach to React and JSX 之类的内容。

PS：只要你始终如一，我会说你是安全的。

【讨论】：

这里还有一些可能有用的unofficial guidance：
这样未来的访客就不必滚动在 Airbnb 约定中找到正确的部分，这里是：Naming

【解决方案2】：

基于“Google JavaScript Style Guide”

文件名必须全部小写，并且可以包含下划线 (_) 或破折号 (-)，但没有额外的标点符号。遵循约定您的项目使用。文件名的扩展名必须是 .js。

【讨论】：

这是我过去 2 年一直在做的事情，对此我很满意。我不知道谷歌风格指南包含这个。这将帮助我说服队友:)
但是 react 组件好像使用 .jsx 作为文件扩展名。
.tsx 用于 TypeScript。
Google/Angular 的约定在文件命名这样微不足道的事情上与 React 发生冲突，这让我深感悲痛。 ?‍♂️

【解决方案3】：

正如其他人所提到的，我们采用了 Airbnb 风格指南。这是他们文档中有关命名约定的特定部分：

https://github.com/airbnb/javascript/tree/master/react#naming

tl;dr PascalCase 命名

【讨论】：

我想知道为什么现在大家都叫 PascalCasing TitleCasing？是千禧一代的抖音吗？
我想这是因为没有人知道“Pascal”是什么，而“Title Case”实际上意味着非计算机世界中的某种东西。
@caio-wilson Pascal 大小写和标题大小写不同，请参阅 Camel case on Wikipedia 与 Title case on Wikipedia

【解决方案4】：

根据他们关于File Structure 的文档，只要不是index.css、index.html 或index.js，我就会选择UpperCamelCase。而且create-react-app也有这种结构，可以看here。

【讨论】：

【解决方案5】：

我推荐使用hyphens-case 来命名文件，因为所有npm 模块都是hyphens-case，所以当导入的自定义文件与npm 模块相同时。

【讨论】：

【解决方案6】：

对于组件和类，我使用 PascalCase，即使您使用函数创建组件，您仍然是 pascal case。

示例：

组件文件夹：PascalCase.jsx 我的自定义组件
pages 文件夹：PascalCase.js 代表我的页面的组件
类文件夹：PascalCase.js
其他文件夹：camelCase.js

永远不要使用 snake_case.js。

对于我只使用小写字母的文件夹，我从未使用过：camelCase、snake_case 或 hyphen-case。

【讨论】：

例如：我需要一个组件，它将包含 2 列等宽 6 和 6 Grid 6 6。如果没有蛇形或连字符大小写，它将不可读。

【解决方案7】：

我建议使用小写字母作为文件名，因为有些环境是区分大小写的，而有些则不是。此外，更容易漏掉大小写错误。

由于文件名大小写问题，我刚刚在将我的反应代码部署到 Netlify 时遇到了问题。更详细的解释可以参考Netlify's support guide "Netlify app builds locally but fails on deploy (case sensitivity)"。

【讨论】：

【解决方案8】：

根据 Eloquent Javascript。类遵循 TitleCase，方法/函数和属性遵循 camelCase。也有人说目录和组件遵循所有小写命名。它只是许多编程语言（包括 C、C++ 和 Java）中的首选命名方式和流行或约定。

但是，Javascript 是一种野语言，没有确切的命名规则，只有偏好。只要命名在整个模块/组件/项目中易于阅读和一致，并且不会混淆其他开发人员，完全取决于您如何命名它们。

【讨论】：

“PascalCase”或“UpperCamelCase”。标题大小写不会将所有首字母大写——例如，只有那些将在书名中大写的字母。见en.wikipedia.org/wiki/Title_case。

【解决方案9】：

React 有很多东西，但直截了当不是其中之一。

但如果要说的话，我发现这篇文章 5 Best Practices For React Developers 非常有帮助在我看来。

关于命名约定的说明有两点：

组件应该是 PascalCase
方法应采用驼峰命名法并以其功能命名

除此之外，这完全取决于您或从事该项目的团队，因为在一天结束时，当进行更改或添加更新时，您必须记住所有内容。

【讨论】：

嗨，谢谢，但问题是关于文件命名约定，而不是文件中的类、函数和变量。