webpack2+react+react-router+react-redux+ES6+antd-mobile版本的Cnode
苦於我就職的公司的技術棧還是ES5+jQ+handelbars，
而我一直對React全家桶非常感興趣，所以想自己來個強行實戰，
見到react中國社群有幾個CNode社群的react版本，
於是自己也計劃了用CNode提供的API，從零開始做一個開源專案。
這個專案是我剛開始是寫在github上的，用了一週左右從零學react，
然後清明節放假，哪也沒去，做了這個非全功能版的CNode社群。
從開始熟悉react到完成這個作品，一共用了不到2周時間，
前提是我有一定的技術沉澱，所以新手也不要覺得2周很快。
也許對一些大牛來說，這已經比較慢了。
先上個作品地址，來掃碼：
覺得還不錯的話，點這裡給我一顆Star~
靜態伺服器是node搭的，PM2開啟守護，不用再擔心掛掉了。
2017.5.4完成react-router版本4的升級，以及使用browserHistrory的線上部署。
- 本地開發除錯請在config裡切回hash路由，不然重新整理會有問題，線上部署browserHistory需要伺服器配合，我也把配合邏輯的node程式碼上傳，檔名server.js。
- 微信分享問題由jssdk解決，不在本例範圍內。
- 微信內需要用域名，我沒弄域名，所以線上還是改回使用hash路由以便觀看。
2017.4.27給自己立兩個flag，不定期會更新：
- 改造hashHistory為browserHistory，包括服務端都自己來配置(宗旨是解決微信分享會截斷#雜湊地址的問題)。
- 把react-router升級到4版本。
2017.4.6更新思維導圖。
首頁載入還是有一些可以優化的地兒耐心等一會兒吧~！
使用的技術棧：
webpack：更新到2版本，網上目前大多數webpack-react教程都是1版本的配置寫法。
react：誰用誰知道。
react-router：激進的我一邊查閱4版本的英文文件一邊做demo，發現改動太大，國內連issue幾乎都沒有，所以我鳥悄的退回到3版本使用(後期會更新到4版本)。
react-redux：挑戰所在，相當於在新的開發模式上再疊加新的東西。
ES6：以前自己學JAVA的時候就喜歡Class的寫法，這次每寫一個元件都爽咩哈哈。
antd-mobile：UI樣式，阿里提供的antd的移動端實現，完美契合react，好用，好看。
幾點心得：
對常用jQuery/Zepto這類類庫開發的開發者來說，react開發體驗要好太多，webpack的強大功能使開發專注於程式碼，不用再考慮babel轉好了ES6還要確定目錄、sass還要用考拉或者filewatcher來處理、程式碼複用到底寫在哪裡才好...等問題。
眾多的貢獻者，超高的社群活躍度，數不清的外掛(這次專案中使用了許多，實在是太好用)，react+webpack+ES6的技術棧可以給開發者長期浸淫的信心。
redux架構給我的體驗還不錯，多虧阮一峰老師的簡明教程，這個教程是三部的，都需要認真看。這些教程讓我可以快速掌握一些核心的使用方式以及提早要避免的坑，對應redux，我的專案結構是經過一番考究才定下來的。
雖然react-redux建議UI不要帶有任何自己的state，但實際業務中，靈活的使用UI本身的state是非常有利於開發的，不要為了使用redux而使用redux。另外，開發人員不是特多的話，reducer寫在一個js裡也不錯，出了邏輯問題直接定位到這。action的type命名遵循一定規律，會給後期開發帶來想不到的福利，比如這次的非同步action‘fetch’，開發後期發現非同步帶來的問題有很多，需要一個全域性控制，這時reducer配合正規表示式+遵循了一定規律的命名，很簡單就實現了想要的。
雖然可以很快就實現初級的專案，開發過程中，完全不考慮操作DOM的體驗雖然好，但也帶來了許多可能的不必要的重複渲染，react配合redux非常需要注意效能，reducer處理不好，經常會重複渲染，理解react的運作方式很重要，零活運用shouldComponentUpdate來使你的頁面效能達到最好，本身這就是一個挑戰，再加上redux的參與...經過一番努力，我才使所有的頁面都禁止了不必要的渲染，這個優化我體現在了控制檯裡，你可以檢視每頁的渲染情況。
實現回到長列表的上次滾動位置，著實耗費了我不少時間(我經常在react技術群裡看到好多人提這個問題)，想了許多種實現方式，最終通過ListView的initialListSize屬性配合快取，實現了幾乎媲美原生的回退到上次列表位置的效果。還有antd的ListView重複觸發又沒有詳細明確的解答的onEndReached事件問題，最終通過對非同步的控制以及在render中做了一些非常規處理才解決。
長列表的滾動延續動畫無法控制，導致模仿iOS回到頂部的功能總是有缺陷，我有很多想法，比如：遮蔽掉原生事件，Touch.js之類的元件模擬。也可以單獨弄個回到頂部的按鈕出來，那樣點選一次就會讓滾動停下，第二次就可以回到頂部了(但是那樣長得就不像原生的了)。 網上有很多長列表優化的文章，這個也是作為H5發開著需要著重研究的一個點，需要更深入的研究。也許在RN裡能有更好的表現？所以，呃，研究RN勢在必行。
重要的首屏載入問題，在Gzip的淫威下，1.6M的bundle壓縮後只有300多k，然後，webpack+react-router還能實現按需載入，在硬體不斷進步的今天，越來越不是問題了，這已經是現實了，就像兩年前我們還在擔心有的老闆想相容IE6，如今淘寶都只支援IE9+了，我的夢想是，沒有IE，哈哈哈哈。Gzip我是用webpack-dev-server開的，包括proxy也是用它開的，在開發角度來說，比ngnix還方便。以前用ngnix處理開發中的跨域，還要另外去動手(懶得不要不要的)。
雖然英文水平可以勉強看英文文件，但無法像看中文文件那樣自如瀏覽，一定程度上影響跟隨國外優秀新版本技術的腳步，下一步也要強迫自己多貼近英文。
因為接觸的越多，覺得需要學習的越多，內心也是五味雜陳的，我還沒女朋友呢。。。
作品實現的功能：
1、首頁：上拉無限載入(目前沒做下拉重新整理)，文章分類顯示，點選條目進入文章詳情，實現回退/Tab切換後，回到記錄的滾動位置。
2、文章詳情頁：顯示文章詳情和評論，登入情況下可以收藏/取消收藏，提供回退功能。(評論點贊和回覆功能暫時沒有實現)
3、收藏頁：顯示已經收藏的文章，點選條目進入文章詳情。
4、訊息頁：(目前沒做跟訊息有關的功能)。
5、我的：只提供了顯示頭像和退出功能。
6、登入：實現了登入功能，沒有登入的情況下，進入無許可權的頁面會跳轉到登入頁面。
*、其他：首頁長列表Iphone體驗良好(回到頂部是缺陷)，沒有考慮android的情況，比如按需進行body滾動等等。
*、後期規劃：不定期完善剩餘功能，也有可能轉戰RN，下一步打算做一個思維導圖，梳理一下架構思路(已完成)。
*、已知問題1：模仿iOS回到頂部功能沒實現，也沒做按鈕式的回到頂部；
*、已知問題2：移動4G情況下，CNode的API好像被牆了，有時導致資料載入不出來。
*、已知問題3：頻繁的聯網/斷網後，可能會出現Bug，畢竟不是線上產品，暫時不處理。複製程式碼
更多效果圖片請到這裡來看，掘金的圖片排版我還沒搞懂...
在此開放原始碼，提供給有興趣一起研究的coder們，主要部分我都進行了註釋。
快速實現本地dev模式執行我的原始碼，三步走起：
1、選擇合適的空資料夾，開啟你的git bash輸入 git clone git@github.com:TerryBeanX2/Webpack-React-Router-Redux-ES6.git 克隆我的倉庫；
2、命令列 npm install ；
3、命令列 npm run dev ，瀏覽器訪問 localhost:8888 ，F12進入移動開發模式檢視 ；
*、如果出現問題，嘗試cnpm淘寶映象安裝。複製程式碼2017.4.6更新實際專案思維導圖
其實就是React+React-Router+React-Redux的架構流程圖例項版
首先，我們來說為什麼要用Redux
下面上本專案思維導圖
希望得到你的STAR
這次很用心的做了一個作品，希望得到同仁們的肯定，
我會盡量繼續更新，快來點Star吧~