[EN] React 项目开发指南 — Emre MUTLU

你好，
本指南包含开发应用程序时必须遵循的规则 反应 .本指南旨在确保不同人编写的代码相互兼容，并生成质量更高且错误更少的代码。换句话说，它的目标是让团队中的人们连贯地编写代码。
笔记： 把这里的一切都当作意见 ，不是绝对的。构建软件的方法不止一种。

关于作者
两年多来，我一直在使用 React 开发项目。我在互联网上了解了进入该领域的必要信息。这就是为什么我想通过分享我在互联网上获得的知识来偿还社区的债务并为社区的发展做出贡献。

“知识随着共享而增长”

开始阅读前须知

文中技术术语太多，为了一一解释，我为技术术语中提到的主题添加了解释链接。 （带下划线的短语是可点击的链接。）

请务必学习本文中描述的基本 Javascript 信息： https://www.freecodecamp.org/news/top-javascript-concepts-to-know-before-learning-react/

请务必彻底理解以下陈述。
“一切都是 React 中的一个组件。”
- 好吧，我们使用 HTML 标签（例如：

… ）。
+ 实际上，这是一个 反应组件 ;我们正在使用 JSX .我们不使用 HTML .
有关 JSX 的介绍，请阅读： https://reactjs.org/docs/introducing-jsx.html

笔记： 本指南假定您使用的是功能组件。 点击 检查功能组件和类组件之间的差异。

笔记： 本指南假设您正在使用 VSCode .如果你使用 网络风暴 或任何其他代码编辑器，您可以忽略与 VSCode 相关的部分。

为什么我选择使用 VSCode？
因为我爱 VSCode 的 代码片段系统 、快捷方式、附加组件存储库和可定制性。
您可以找到有关的详细信息 VSCode 在这个地址： https://code.visualstudio.com/docs/editor/whyvscode#:~:text=With%20support%20for%20hundreds%20of,navigate%20your%20code%20with%20ease .

如果我们应用 坚硬的 反应原则：
小号 = 单一责任原则 (SRP) => “每个功能/模块/组件都应该只做一件事”
○ = 开闭原理（OCP） => “软件实体应该对扩展开放，但对修改关闭”
大号 = 里氏替换原则 (LSP) => “子类型对象应该可以替代超类型对象”
我 = 接口隔离原则（ISP） => “客户不应该依赖他们不使用的接口。”
D = 依赖倒置原则（DIP） => “一个人应该依赖于抽象，而不是具体”
* 例如，您不应该在组件中进行数据获取。组件的工作是渲染。它不需要知道其他任何事情。出于这个原因，我们应该以不同的方法进行数据提取，并且只将该数据提取的结果传递给组件。

该怎么办

1.VSCode 设置
首先，必须使用“ ESLint ,” “ 更漂亮 ，“ 和 ” 吉特镜头 ” VSCode 应用程序的插件。
为什么是强制性的？

• ESLint 立即警告您您的错误并防止您错误地构建。
• 更漂亮 允许您的 **** 要在您的特定设置框架内格式化的代码。 （例如：每行最多显示 120 个字符，最后一行显示更多。或者在定义每个变量后以分号结束。）（ 我们通常在保存的时候使用 Prettier。 )
• 吉特镜头 是一个工具，可让您从 VSCode 界面执行 Git 操作。 （你可以看到哪一行是由谁添加的，用哪个提交信息，这样你可以更好地分析写代码的目的。）。

• 安装“ Emre MUTLU — Javascript — 扩展包 ” 如果您愿意，可以添加附加包。

Emre MUTLU — Javascript — Extension Pack

标准 ” 犯罪 ” 格式必须在 git 上实现。 （例如，您可以考虑此处的提交消息系统，并通过为您的项目添加新规则来扩展它。（示例： https://github.com/emremutlu08/react-best-practices/blob/main/common-commit-format/common-commit-format.md )

**二、基本原则
** - **** 原则“ DRY、KISS 和 YAGNI ”必须遵守。
- 最好把“ 单一职责 ”原则付诸实践。
- 所有组件都必须有一个 id。 （这样，我们更容易 调试 .) 这些 ID 不应相互冲突。
因此，如果项目中使用的 React 版本小于 18，则使用表达式 => id = Math.floor(Math.random() * 100 + 1) + '-' + FILE_NAME ,
如果它很大，您可以使用表达式 id = useId() + '-' + FILE_NAME .

• 一切都必须是一个组件 如果它会使用不止一次。
  - 组件中使用的所有道具 **FILE_NAME.propTypes = { ... props 应该在这里添加 }
  ** - 如果在组件数组上映射，则必须在最包含位置的组件中添加唯一键值。

3. 我们

Pay attention to naming conventions.

• 正确和描述性的命名法是强制性的。 （例如，不要键入 isModelOneOpen 或将其缩短为 isModOnOp，而应将其命名为长且具有描述性的 isCreateModelOpen。​​）这样，您不必添加注释来解释它。
• 文件名必须是 PascalCase 名称。 （例如：提交表单元素）
• 函数名称必须是驼峰命名法名称。 （例如：onSubmit）
• 自定义挂钩名称必须以 useSmt 开头（例如：useWindowSize）

4. 格式化

• 写第三方（例如， npm 包 ) 在顶部导入（如果可能，按字母顺序）。在底部写下应用内导入。
• 所有新项目都必须使用通用的“ESLint”和“Prettier”设置。 （例如，您可以使用此处提供的设置： https://github.com/emremutlu08/emre-mutlu---javascript---extension-pack/tree/main/prettier-and-eslint-files )
• 在提交代码之前，请确保格式正确。

推荐的

• 防止频繁的状态变化 ，这将有助于在
  标记并在 onSubmit 的情况下获取信息。 （反应应用“ 使成为 ” 发生在每个 状态 改变”。如果这种情况发生得太频繁，则会对应用程序性能产生负面影响。）
  笔记： 您还可以使用 使用备忘录 钩子以避免在不同情况下不必要的渲染。

NOT RECOMMENDED

RECOMMENDED

• 创造 ” VS 代码片段 ”（代码片段）用于常用表达式。 （这样，您可以避免在必须重复编写的事情上花费太多时间。）
  （您可以使用此工具快速生成片段： https://snippet-generator.app/ )

We type ‘fa’, and the snipped appears.

• 以您想要的方式保留它： 在你之前出现的人可能把代码弄得乱七八糟，做了复制粘贴工作，简而言之，留下了质量很差的代码。只要有机会，您就应该修复代码，以便您和追随您的人遇到更易于理解的代码。

We want to change this.

To this