React全家桶寫一個CNode社區，奉上心得與源碼

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吧~