react元件化的ui庫
目前react元件化的ui有很多，這裡有很多已實作的react元件庫。如：
touchstonejs - react.js powered ui framework for developing beautifulhybrid mobile apps.
elemental ui
rsuite | 一個基于 react.js 的 web 元件庫
ant design of react - ant design
material-ui
react-bootstrap
react + foundation · foundation as react components
essence - react material design framework
react-mdl: react components for material design lite
belle - configurable react components with great ux
mui - material design css framework
grommet
react toolbox
react-blazecss 0.4.3 demo
pivotal ui: intro
bfd ui
但是我一直比較偏愛的semantic-ui不在這個清單中。雖然官方目前也在做相關的工作(戳這裡)，但目前還沒有出穩定版本。個人覺得這正是一個練習的機會，将semantic-ui庫react元件化。
semantic-ui
semantic-ui是一套完全語義化設計的前端架構，使用起來靈活又友善，可以滿足多變複雜的頁面實作需求。從官方文檔(版本2.2)來看，主要有四類架構元素：
元素
組合
視圖
子產品
具體示例可參考官網。
基本分析
semantic-ui實作于語義化設計，各個類可以自由組合使用已實作頁面需求。每個元件的屬性定義大多類似，如button和icon，都有size或者color等常用屬性，而這些屬性可用公共輔助類來定義和聲明。
從實作上來講，元素、組合和視圖的大部分實作，都可以用純css聲明來達到效果，但子產品類的元件往往需要js的輔助以實作動态效果。考慮到這一點，元件實作大緻分為兩類實作：ui類和動效類。需要實作3dtransition的元件都繼承于動效類，剩餘隻需css聲明的元件繼承于ui類。當然動效類也同樣繼承于ui類。
uielement
uielement作為所有基礎ui元件的基類，主要負責以下幾類實作：
元素class的生成
元素事件回調的生成
基于semantic-ui的語義化實作，所有class類均由多個屬性拼裝組成，是以每個ui元件的屬性在元件内聲明即可，class類的生成由父類uielement負責。
amelement
amelement作為動效元件的父類，主要負責以下功能實作：
元件的show/hide接口調用
直接操作元件dom，生成transition的style
每個動效元件繼承amelement後，均将本元件的ref引用傳遞給父元件，由父元件統一調用并修改子元件的dom元素style屬性，以實作3dtransition效果。
propshelper
元件props的輔助類，用以生成元件的class。propshelper中有多個靜态方法：
createstyle：用以生成元件class定義
getdefaultprops：取得所有元件的通用props
每個元件在生成class定義是，隻需提供本元件的props以及屬性定義，即可生成對應的class定義。
作者：sheva
來源：51cto