reactJS中的文件命名约定？

最近我开始学习ReactJS，唯一让我困惑的是如何命名ReactApp目录中的

文件夹

和

文件

为了命名

组件

文件，一些人跟随

TitleCase.js

和一些跟随

camelCase.js

的人

命名应用程序

目录

很少有人跟随

camelCase

和

smallcase

或

smallcase

---

我试图在ReactJS中找到有关命名约定的官方文档，但找不到。有人能帮我找到在ReactJS中命名文件的确切方法吗？提前感谢。

关于命名约定，ReactJS是非专有的

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

这是个人（团队）的偏好。如果你很难强制执行，你可以坚持这样做

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

基于“

文件名必须全部为小写，并且可以包含下划线（_）或 破折号（-），但没有附加标点。按照惯例 您的项目使用。文件名的扩展名必须是.js

---

根据雄辩的Javascript。类遵循TitleCase，方法/函数和属性遵循camelCase。也有人说，目录和组件遵循所有小写命名。它是许多编程语言中命名和流行的常用方法，包括C、C++和java。

---

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

根据他们的文档，只要不是

index.css

，

index.html

或

index.js

，我就选择大写字母。此外，具有这种结构，您可以看到。

我建议使用

连字符大小写

进行文件命名，因为所有npm模块都是

连字符大小写

，因此当导入的自定义文件与npm模块相同时。

如其他人所述，我们采用了Airbnb样式指南。以下是他们文档中有关命名约定的特定部分：

---

tl；drPascalCase命名

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

---

由于文件名大小写问题，我刚刚遇到了将react代码部署到Netlify的问题。有关更详细的解释，您可以参考。

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

示例：

• 组件文件夹：PascalCase.jsx我的自定义组件
• 页面文件夹：PascalCase.js表示我的页面的组件
• classes文件夹：PascalCase.js
• 其他文件夹：camelCase.js

切勿使用snake\u case.js

---

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

没有所谓的完美或最佳文件命名方式，这完全取决于您，但您可以遵循以下原则：如果您不使用jsx，那么您使用的是什么？您可以遵循这些约定，它们基本上是针对reactjs的。如上所述，没有“正确”的方法来做到这一点。然而，由于组件基本上都是在代码中用

TitleCase

编写的，我不明白为什么不也在文件中编写。因为这样您就可以像导入“./Component”一样导入组件。至于文件夹，我认为标准是

smallcase

。组件文件的TitleCase是最好的，因为它可以让您知道其他camelCase文件正在导出组件以外的内容。React在这方面并不固执己见。使用最适合你的东西。由于我们大多数人使用基于npm的项目，我们倾向于在结构上遵循正常的npm指南。您还可以从git和vscode等工具获得提醒，它们更喜欢小写名称而不是混合大小写。因此，任何选择都来自其他因素，而不是反应。这里还有一些可能有用的因素：只是为了让未来的访问者不必在Airbnb会议中滚动找到正确的部分，这里是：这是我过去两年来一直在做的事情，我对此感到满意。我不知道谷歌风格的指南里有这个。这将帮助我说服队友：）但react组件似乎使用.jsx作为文件扩展名。

.tsx

用于TypeScript。我深深地感到撕裂，Google/Angular约定与react在文件命名等琐碎问题上存在冲突。我想知道为什么现在每个人都叫帕斯卡辛字幕？这是千年一遇的技巧吗？我想这是因为没有人知道“帕斯卡”是什么，而“标题格”在非计算机世界中实际上意味着什么。