ReactJS中的文件命名规范是什么？

Question

ReactJS中的文件命名规范是什么？

reactjs

141

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

对于组件文件的命名，有些人使用TitleCase.js，而有些人使用camelCase.js。
对于应用程序目录的命名，一些人使用camelCase，而一些人使用smallcase或small-case。

我尝试查找官方文档以获取命名约定，但未能找到。请问有人能帮我找到在ReactJS中命名文件的正确方法吗？

- Narasimha Reddy - Geeker

19

没有所谓的完美或最佳的文件命名方式，完全由您决定，但您可以遵循这个链接：https://github.com/airbnb/javascript/tree/master/react - Mayank Shukla

如果你不使用JSX，那么你在用什么？你可以遵循这些约定，它们基本上是为ReactJS设计的。 - Mayank Shukla

3

如上所述，没有一种“正确”的方法来做这件事。然而，由于组件在代码中通常都是以TitleCase形式编写的，我认为文件名也可以这样写。因为这样你可以像这样导入：import Component from './Component'。至于文件夹，我认为惯例是使用小写字母。 - Chris

2

使用TitleCase对组件文件进行命名是最好的，因为它可以让你知道其他camelCase文件正在导出与组件不同的内容。 - romseguy

2

React 在这方面没有固定的意见。使用最适合您的工具。由于我们大多数人使用基于 npm 的项目，因此我们倾向于遵循结构上的常规 npm 指南。此外，您会从像 git 和 vscode 这样的工具中获得提醒，它们更喜欢小写名称而不是混合大小写。因此，任何选择都来自其他内容的结果，而不是 React。 - hazardous

这肯定是那些基于个人意见的决策之一，其解决方案总是“选择一个并保持一致”。我选择使用帕斯卡命名法是因为我决定使用VS Code扩展程序ES7 React/Redux/React-Native/JS片段。其中一个React组件片段称为rcc，它会自动创建一个常见的组件代码片段，并根据文件名大小写敏感地自动创建名称。因此，为了使代码中的组件名称遵循标准的帕斯卡命名约定，文件名也必须是CamcelCase。 - Darren Evans

10个回答

41

基于'Google JavaScript Style Guide'

文件名必须全部小写，可以包括下划线（_）或破折号（-），但不得使用其他标点符号。遵循项目使用的约定。文件扩展名必须为.js。

- Vlad Bezden

2

这是我过去两年一直在做的事情，我很满意。我不知道 Google 的风格指南包含了这个。这将帮助我说服我的队友 :) - Thijs Koerselman

1

但是React组件似乎使用.jsx作为文件扩展名。 - etlds

1

.tsx 用于 TypeScript。 - BBaysinger

我深感困惑，谷歌/Angular的约定与React在文件命名这样微不足道的事情上存在冲突。‍♂️ - BBaysinger

26

我建议使用连字符命名法hyphens-case来命名文件，因为所有的npm模块都是使用hyphens-case，这样导入自定义文件时就与npm模块相同了。

- Masih Jahangiri

这是最合理的答案。 - luuchorocha

15

就像其他人提到的一样，我们采用了Airbnb的代码风格指南。以下是他们文档中有关命名约定的具体部分:

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

简而言之，使用PascalCase进行命名。

- M.W. Felker

14

我想知道为什么现在每个人都把 PascalCasing 叫做 TitleCasing？这是千禧一代和 TikTok 的事情吗？ - Caio Wilson

3

我想这是因为现在没有人知道"Pascal"是什么，而在非计算机领域中，“标题大小写”实际上有一定含义。 - Luke

8

帕斯卡命名法和标题命名法是不同的，请参见维基百科上的“驼峰命名法”（Camel case）和“标题大小写”（Title case）页面。 - M.W. Felker

我称之为UpperCamelCase和lowerCamelCase。 - undefined

11

根据他们关于文件结构的文档，我会选择PascalCase，只要不是index.css、index.html或index.js。此外，create-react-app有这种结构，你可以在这里看到。

- Daniel Danielecki

5

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

我在部署我的React代码到Netlify时遇到了文件名大小写问题。有关更详细的解释，请参阅Netlify的支持指南“Netlify应用程序在本地构建但在部署时失败（大小写敏感性）”。链接：Netlify's support guide "Netlify app builds locally but fails on deploy (case sensitivity)"。

- Andrew Lam

4

我使用PascalCase来命名组件和类，即使您使用函数创建组件，仍然要使用PascalCase。

示例：

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

绝不要使用snake_case.js。

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

- Max

我需要一个组件，其中包含两列相等宽度的6和6。网格6 6。如果没有蛇形或连字符，它将无法读取。 - Anton

1

根据《Eloquent Javascript》，类名采用TitleCase，方法/函数和属性采用camelCase。目录和组件的命名都是小写。这是一种常见的命名方式，在包括C、C++和Java在内的许多编程语言中都很流行。

然而，Javascript是一种自由的语言，没有确切的命名规则，只有个人喜好。只要命名易于阅读且在整个模块/组件/项目中保持一致，并且不会混淆其他开发人员，你可以随意命名。

- Farruh Habibullaev

2

"PascalCase" 或者 "UpperCamelCase"。标题大小写不会将所有首字母都大写，只有那些在书名中需要大写的字母会被大写。请参考 https://en.wikipedia.org/wiki/Title_case。 - isherwood

0

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

但如果要说什么，我发现这篇文章 React 开发者的 5 个最佳实践在我看来非常有帮助。

关于命名规范，其中提到了两点：

组件应该使用 PascalCase
方法应该使用 camelCase 命名，并根据其功能进行命名

除此之外，一切都取决于你或团队在项目上的工作，因为在最后的时刻，当需要进行更改或添加更新时，你们将不得不记住所有内容。

- Relcode

谢谢，但问题是关于文件命名规范，而不是文件内的类、函数和变量。 - Narasimha Reddy - Geeker

-1

在一个大型项目中，我希望以这种方式管理我的文件。在文件名中包含组件这个词似乎是不必要的，因为从文件扩展名中已经清楚地知道它是一个组件。但是，随着您的项目变得越来越大，这使得区分文件变得更加容易。

 src
   components
     addTodo
         addTodoForm.component.jsx
         addTodoFormSubmited.component.jsx
         index.js
     navbar
     todolist
       index.js
   pages
       addTodo.jsx
       index.js
       todo.jsx
       updateTodo.jsx

根据我的理解，我很容易知道哪个文件用于组件，哪个文件是页面。

- DSDmark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaloyan Kosev · Accepted Answer

关于命名规范，ReactJS 是没有固定意见的。

官方没有针对你提出的问题发布过指南或声明，文档中也没有相关内容。

这是个人（团队）喜好。如果你很难强制执行一种规则，可以采用类似于Airbnb 的 React 和 JSX 大多数合理方法。

附注：只要保持一致，我认为就没问题了。