[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 )
在提交代码之前，请确保格式正确。

不该做什么

任何不会在当前屏幕上使用的东西都不应事先调用。（特别是在开始的时候，不要调用所有的东西，降低应用程序的性能。）
有必要避免使用在名为“ 魔线 ”。
例如：（类型 item.userTypeId === userTypeEnum.Admin 代替 item.userTypeId === 2 ) 应该写得易于阅读，并且您不会反复查看 Admin 的代码是什么。（同时，如果管理员的代码发生变化，您只需在一处更改即可省去麻烦。）
示例 2：（使用 ** ** 代替 ** ** ）。（您也可以使用 i18next ，提供方便的本地化操作。）
- 有必要避免使用“ 内联 CSS ”，并尽可能基于“组件”进行。因为当CSS发生变化时，从各处一个一个地改变它会导致很大的问题。
- 文件中的行长度不得超过 500 行。如果你写了超过 300 行代码，你应该检查你写的东西，把它分成有意义的部分/通过把它分成方法来使用它。您必须从不同的文件导入。
- 尽量不要直接干扰物体。您必须创建对象的新副本并对其进行修改。
- 不要尝试在不使用 setState 的情况下更改状态信息。
- 在 if 中添加 return 语句时避免不必要的 if-else 语句；以下语句不起作用。所以你不需要使用其他。
- 而不是 array.push()，阵列重组，并且应该进行附加。
[…previousArray, { newObjectElement1: newObjectElementValue1 }]
- 避免道具钻孔 . （如果你的 props 达到两个以上的组件级别，你就是在做“Props Drilling”。）