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
麻省理工學院
