近日刷微網誌，#2018年結婚率創新低#榮登熱門話題NO.1，滬浙最不積極。
生活壓力越大，缺愛的人也越來越多。。。據本萌的不完全觀察，程式猿雖然是壓力加成的職業，在袋鼠雲還是有不少早早脫了單。至于，脫單失敗的各位，那真的是憑實力單身啊~
罷遼罷遼~母胎solo可能是這輩子都無法改變的定局。如果你也是上述這類想要改變的實力單身者，歡迎給我們投稿示愛，讓我們一起，用知識改變命運！
夫子說
用過 React 的朋友都知道，React 項目檔案夾的劃分是有很多種的，在 React 官方關于檔案結構這個部分給出了一些社群比較常見的建構方式的示例。例如有通過features或者routes進行分組的，也有通過子產品類型（type) 劃分的。在文檔提到了一種針對components 進行細化組織的方法 —— Atomic Design。如果還沒了解過這個設計方法的朋友，不妨來看一看。
什麼是Atomic
Atomic 是一套指導設計前端元件（Components）架構的方法。在我們的日常工作中，如何更好的劃分和管理前端元件常常會是我們碰到的問題。Atomic 通過一系列設計思想和原則，可以很好指導我們的項目架構。用 Atomic 作者自己的話說，這套設計方法的靈感是來自于自己曾經學習過的化學課，以及對自然知識本身的思考。作者通過原子（Atoms)、分子(Molecules)、 有機體(Organisms)、模闆(Templates), 頁面(Pages) 這5種基本類型元件，通過靈活的組合，進而來滿足我們日常的頁面開發需求。
幾種元件的關系 - 官方圖檔（參考資料：https://dwz.cn/tNve6oid）
1原子（Atoms）
正如化學知識中所表述的，原子（Atoms)是元素能保持其化學性質的最小機關，是以正好利用原子的概念，可以用來元件系統中的最小機關的元件，或者說抽象到最小粒度的元件，即我們在 HTML 中常見的一些基本元素，例如：按鈕（buttons)，表單标簽(labels)，輸入控件（input)等等。既然是最小機關，Atom 類型的元件顯然是無法再進行任何拆分了，如果能繼續拆分，那麼該元件應該被劃分為分子元件（Molecules）。
2分子（Molecules）
我們都知道，在化學概念中，分子是有若幹原子組成。通過組合各種原子元件，我們可以輕易的可以組合出某種功能的分子元件。例如通過組合 input 控件和 button 元件，我們可以得到一個搜尋（Search)分子元件，通過組合 button 和 a 标簽，可以可以組合分頁（Pagination）元件。
3有機體（Organisms）
僅靠分子元件和分子元件的抽象，仍然是不能滿足我們實際工作中對元件複用的需求，例如我們我們大部分項目中都有導航欄（Navigation Bar)、頁頭（Header)、頁腳（Footer)、邊欄（Sidebar)、清單（List) 等等元件，顯然可以根據需要可以抽象成獨立元件，以便後來的項目可以直接使用。可以看到的是，在有原子和分子元件的情況下，我們通過靈活組合這些原子、分子元件的方式，便可輕易達到我們的需求。而通過這類方式組合的元件類型我們便稱之為有機體元件（Organisms)。
4模闆（Templates）
到這裡，模闆層就很好了解了。很顯然，模闆層是原子、分子、有機元件的結合體。例如包含頭部（Header、Content、Footer)常見部分的首頁模闆、又或者各種左右上下布局模闆元件等等。
5頁面（Pages）
頁面這一層可能是複用率最低的一層了，因為業務需求大部分時候各不相同的，當然也不排除有複用頁面的情況。頁面元件自然就是個包含了其他四種元件類型的綜合體了。有了前幾層元件的抽象，可以輕松的應對各種業務頁面，并且不斷地可以豐富新元件到各類型自己中去，以便後面的項目中持續使用。
綜合看下來，通過這5種元件的劃分，就可以很好的滿足我們實際項目中對頁面元件進行劃分和管理了。
Atomic實踐
根據 Atomic 的思路, 以 src 目錄為基礎，在 React 項目中，我可以得到了類似如下的開發目錄：
當然，像我通常喜歡把 pages 的層級提高，也就是把他與 components 同層，也就是：