碰了一陣子React,大致整理一些如何學習和開發的思路出來，供作參考之用。

準備知識 對初期接觸的朋友來說，基本上其實知道這些東西是做什麼用，然後會用就好。 之後根據你的需求再去深入研究它的各種用法。 webpack https://webpack.github.io/

babel https://babeljs.io/

了解一些js es6和es7的語法 (es7可以只需知道decorators) http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

React 1.了解props和state的差別 2.了解載入元件的順序 (componentDidMount那些) 3.了解開發時你要如何思考。 英文：https://facebook.github.io/react/docs/thinking-in-react.html 中文：http://reactjs.cn/react/docs/thinking-in-react.html 重點就是

• 拆分界面
• 處理成靜態版
• 了解哪些東西是state
• 知道state應該要放在哪裡
• 添加反向數據流(其實就是讓user的action可以導致畫面和資料的變化,這邊我們是用redux來處理)

Redux 了解action reducer store等等部分，這部分處理好之後，在開發新功能時其實就只要 新增action和reducer的相關程式就好。

如何有邏輯的分層？ 我是這樣分的，供做為參考 Root:管理Provider和Router，包含Page. Page:一個頁面，可能包含一個Container或是多個Container Container:一個完整可運作的單位，包含多個Component,每個Component有比較緊密的資料聯結。 Component:在你拆分界面時所拆出來的組件。

透過Redux來做開發時 每個Container有屬於自已的reducer和action(儘量寫在一起) 透過bindActionCreators,生成的action從Container注入到Component

範例 https://github.com/motephyr/react-redux-socketio-slack-customer-service 透過各種方式(如slack)加上socketio去做你的線上客服系統，界面上其實還要再調整，不過做為範例用。 主要運作的部分是MessageBoxComponent這個組件，其他有些不相關的程式碼最近再做一次整理。

示意圖