[翻译]怎么写一个React组件库（二）

时间：2024-10-10 19:03:26

本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018，喜欢本文的就去知乎点个赞支持下吧～

引言

该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库。

这是该系列的第二部分。如果你还没有阅读 Part 1，我推荐你先阅读它。另外，我们将会讨论有关原子设计的内容。如果你不熟悉相关概念，阅读一些相关内容 (这儿)_ 将对你很有帮助。_

在该部分我们将讨论:

  • 通过styled-components使得我们的组件变得可配置性更强

  • 添加一个调色板到我们的库

  • 使用一些polished的功能

  • 使用npm link, babel和eslint的高效开发流程

  • 将原子设计原则应用到我们的组件库结构

原子设计 & 组件

现在我们已经完成许多初始化配置，接下来我们将花时间思考如何构建一个实用的组件库。

为了实现这目标，我们将借用 Brad Frost 的原子设计的一些概念。这本书绝对值得一读，你可以购买它如果你想了解更多的相关内容。但为了简洁起见，我们将只了解一些高维抽象概念。Brad 将web UI分为五个独立的部分：原子(atoms)，分子(molecules)，实体(organisms)，模版(templates)，页面(pages)。

我们的组件库将由原子和分子组成。开发者可以通过组件库快速构建实体，模版和页面。

[翻译]怎么写一个React组件库（二）

Source: http://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png

原子(Atoms) -> 元素(Elements)

原子是构成UI中最小的不可分割的单位。想想按钮，链接，输入框等等。在本教程中，我们统称为它们为元素。

还记得我们创建了按钮组件然后将其放入 /elements目录么？

相关文章