react atomic design
1.0.0
这是一个使用原子设计方法的样板，使用了一些很酷的东西，比如 Storybook、Flow 和 CSS 模块。请随意测试、更改和适应一切。
阅读全文
原子设计在设计界广为人知，它有助于构建一致、可靠和可重用的设计系统。另外，在React、Vue以及刺激组件化的框架的世界里，原子设计也在不知不觉中被使用；但如果使用得当，它就会成为开发人员的强大盟友。
原子设计这个名字来源于分离原子、分子、有机体、模板和页面中的组件的想法，如上图所示。但是每个独立部分的职责是什么？
原子是尽可能小的组件，例如按钮、标题、输入或事件调色板、动画和字体。除了具有许多状态之外，它们还可以全局或在其他组件和模板内应用于任何上下文，例如按钮的示例：禁用、悬停、不同大小等。
它们是一种或多种原子成分的组合物。在这里，我们开始组合复杂的组件并重用其中一些组件。分子可以拥有自己的属性，并通过使用原子来创建功能，而原子本身没有任何功能或作用。
生物体是协同工作的分子的组合，甚至是与构成更复杂界面的原子的组合。在这个级别上，组件开始具有最终的形状，但仍然确保它们足够独立、可移植和可重用，以便在任何内容中都可重用。
在这种状态下，我们停止组合组件并开始设置它们的上下文。此外，模板通过页面的位置、放置和图案创建生物体和其他组件之间的关系，但它没有渲染任何样式、颜色或组件。这就是为什么它看起来像线框。
页面是应用程序的导航部分，也是组件分布在一个特定模板中的地方。这些组件获取真实的内容，并且它们与整个应用程序连接。在这个阶段，我们可以测试设计系统的效率，以分析所有组件是否足够独立，或者是否需要将它们拆分成更小的部分。
当我们开始在 React 中使用原子设计时，我们必须调整方法的一些规则，以确保组件被尽可能多地重用，它们是无状态的，没有位置样式和非常具体的边距，以避免在申请页面。
因此，对于每个新组件，我们都会问自己：“这些组件是否足够通用，可以在使用它们的任何上下文中避免特殊性和/或重复代码？”
所以我们可以写一些规则：
| 脚本 | 描述 |
|---|---|
$ yarn start | 启动一个简单的 webpack 服务器 |
$ yarn dev | 创建一个服务器在5000端口进行开发 |
$ yarn storybook | 使用导入的故事启动 Storybook |
$ yarn flow | 验证流类型 |
@danilowoz
@dleitee
麻省理工学院
