构建 React 项目的一种更好方法

本文目标

通用项目结构

更优的项目结构

接下来是什么？

首先，如果您不知道什么是原子设计，我将在下面做一个简要介绍，但我建议您去Brad Frost 的网站查看一下。

原子设计是布拉德·弗罗斯特构建设计系统的方法论。其核心思想是，我们可以提取生物体的基本组成单元，并以此为基础构建用户界面的层级结构。

Brad Frost 将 UI 组件定义为五个主要阶段：

1. 原子
2. 分子
3. 生物
4. 模板
5. 页

原子是用户界面最简单的形式，由标题、标签、输入字段、按钮等组成。

分子是由原子组成的，它们构成了我们用户界面中更复杂的部分，例如带有提交按钮的搜索字段。

生物体构建于分子之上，并协调用户界面中更庞大的部分。这可以包括产品列表、标题、表单等等。生物体甚至可以包含其他生物体。

模板是页面开始组合的地方，它赋予所有元素统一的目标，从而为它们提供上下文。例如，联系页面的模板会包含用于标题和表单的元素，以及用于文本字段和导航栏的元素。

页面，顾名思义，是我们包含所有内容的最终页面。页面和模板的区别在于，模板不提供任何内容。

本文目标

我想介绍一种在开发工作流程中应用原子设计的方法，目的是使你的代码和项目结构更易于维护、可扩展和直观。

此外，原子设计框架有助于弥合开发和设计之间的沟通鸿沟。开发人员理解原子设计至关重要，这样他们才能用统一的语言与设计师交流。

当组件分类得当后，团队会惊喜地发现他们的用户界面系统变得更加直观和井然有序。代码更易于维护，更新和重构也更加便捷，新设计师和开发人员的入职流程也更加高效。

通用项目结构

你们中的许多人可能都熟悉下面的文件夹结构：

这里的想法是，我们尽量让组件保持“简单”和无状态，而容器则负责协调我们的组件并充当我们的页面。

我认为我们应该摒弃“容器”与“组件”这种概念，原因如下：

1. 它不具备可扩展性。我们只有两个容器来存放我们的用户界面。如果我们有 200 个组件，却只有两个类别怎么办？没错。
2. 这不太直观。容器到底是什么？它是一个页面吗？还是仅仅是一个有状态的组件？这两者之间有什么交集？
3. 这是一个开发概念，而不是设计概念。如果我们使用不同的语言，如何才能与设计师高效合作？设计师并不关心有状态与无状态，他们关心的是应用场景和组件之间的关系。组件是如何使用的？它与用户界面的其他部分有何关联？

更优的项目结构

为什么我们不按照原子设计的各个阶段来构建我们的项目呢？

请注意，我们将页面放在了组件文件夹之外。直观来看，我们不会将页面与其他四个阶段放在同一类别中。页面是最终的呈现形式，而不是各个组件本身。

另外，我通常会/forms在根目录下的 organisms 文件夹内创建一个子文件夹。表单非常常见，所以这是一种使文件夹结构更加细粒度的好方法。

那么，做出这个小小的调整我们能获得什么好处呢？出乎意料的是，好处很多！

1. 统一的设计和开发语言。现在，由于整个团队都使用相同的术语，与设计团队的协作变得更加容易。对于使用 Storybook 的开发人员来说，这一点尤其有利。
2. 可扩展的文件夹结构。我们现在对组件进行了更精细的分类。即使我们有 200 多个组件，也能更轻松地保持 UI 的井然有序。
3. 只需极少的项目上下文信息。通常，新开发者需要对项目有相当的了解才能找到所需的组件。而原子设计语言和结构更加通用，因此更容易理解：“嗯，头文件就像一个有机体，那我去看看有机体文件夹。”
4. 更简洁的代码。怎么做到的呢？原子设计迫使你更好地理解组件之间的关系。即使你一开始面对的是一个庞大、混乱、多功能的组件，当你开始思考“好的，我在哪里能看到生物体、分子、原子等等”时，重构就会变得轻而易举。

接下来是什么？

恭喜，你已经为下一个 UI 项目构建了一个非常稳固的文件夹结构。就这些吗？

让我们快进几周。你拥有了一些原子，一些分子，一切都很美好，你心想：“这进展太棒了！克里斯果然没那么笨！”

但随后你遇到了难题……你正在构建一个复杂的组件，却不确定它究竟是生物体还是分子。分子有状态吗？分子何时才能成为生物体？更进一步说，生物体和模板之间的界限在哪里？模板和页面之间的界限又在哪里？

在实践中，各个阶段之间的界限可能会变得模糊不清，因此在第 2 部分中，我们将探讨如何在 React 项目中定义这些界限。

本部分就到这里，感谢阅读！