引言
由于 10 月份做的 React Native 項目沒有使用到 Redux 等庫，寫了一段時間想深入學習 React，有個想法想做個 demo 練手下，那時候其實還沒想好要做哪一個類型的，也看了些動漫的，小說閱讀，聚合資源的開源項目。由于正好在學習開源的 Android 小說閱讀器 -- 任閱，開始邊學邊做，已完成的功能列在下面。項目地址 在這里，如果有好的意見歡迎提 issue或pr。
效果圖
目標功能
- [x] 排行榜 -- 完成
- [x] 書籍詳情 -- 完成
- [x] 閱讀書籍 -- 完成
- [x] 書單推薦 -- 完成
- [x] 搜索書籍 -- 完成
- [x] 精選書籍 -- 完成
- [x] 分類書籍 -- 完成
- [x] 主題書單 -- 完成
- [x] 書單詳情 -- 完成
- [x] 主 頁 -- 完成
目錄結構
.
├─actions #redux的action,業務邏輯
├─components #頁面容器
│ └─common #公共目錄
│ ├─component-module #封裝的組件
│ ├─images #項目圖片
│ │ └─icon
│ └─style #組件樣式
├─modules #公用模塊
│ ├─api #管理api請求類
│ └─constants #公共字段類
├─reducers #redux中的reducers，處理action發送的數據流
├─router #路由管理模塊
├─store #redux中的store,聯結reducers
└─template #存放html模版
.項目的初始結構和說明已羅列如上。
下面對目錄結構作以下說明
項目最初始是參考 react-pxq 初始化的。
中間件引人日志中間件 —— redux-logger，異步 API 調用 —— redux-thunk 等;
component-module 和 components 存放的都是 react 組件，區別是：容器組件就放在components中，和模塊組件(比如左側菜單組件、書籍列表組件等)就放到 component-module中;
頁面狀態等公共部分最好是獨立起來，統一管理;
跨域配置使用 pathRewrite 字段，需要注意 webpack-dev-server 的版本
準備工作
- 整理 API
- 學習 Redux(搭建腳手架)
API 數據
- 數據來源主要是兩個地方：一個是開源的Android項目與RN版本的數據，另一個是追書神器h5移動端
- 數據跨域：網上查了不少方法，考慮到便捷，使用反向代理的方式處理
學習 Redux
剛開始我差不多用一個星期多學習了 Github 上的 從零開始學 ReactJS（ReactJS 101），基本上每一天看個 1-2 章，玩的也很開心，淺顯易懂，適合初學者閱讀。
前面 8 章：主要是熟悉接下來會用到的基礎概念，當然每一章講完理論，后面都會有例子自己可以動手實踐，加深對于前面概念的理解。
后面 9、10 兩章開始運用上面學到的內容，做一個簡單的項目。
- 接著是用了 5-6 天學習網上開源項目的腳手架 —— 一個 react + redux 的完整項目 和 個人總結，基本上是看
參考所使用的庫、編譯打包的腳本以及 redux 代碼。
- 最后，大概花了 3 天看了阮一峰老師寫的 Redux 入門教程
這部分內容是后面在搭建項目整體結構的時候看的，對于 reducers、action、store 的內容比較深入，加深理解。
技術棧
- 雖然列了眾多核心庫，但是自己也談不上熟練運用，所以列了一些遇到的問題和后期改進的東西。
Webpack(3.10.0)
本項目主要用了第三方的腳手架，學習了反向代理部分，當然自己也搭建過 webpack，后續會升級 webpack。
這里提下反向代理部分，關于使用 webpack-dev-server 進行配置反向代理的時候，如果使用 pathRewrite 到屬性需要注意 webpack-dev-server 版本，這個屬性是在 1.15.0 中，不然是不起作用的。特此說明，網上查到相同問題沒有這個解釋，以免浪費時間。
升級Webpack到3.10版本并更新其他老的包，比如file-loader,css-loader等，出現的問題在下發表格中。
Webpack1.x升級到Webpack3.10
| 問題 | 1.x | 3.10 | 備注 | 參考 |
|---|---|---|---|---|
webpack 2 cannot resolve empty extensions | extensions數組中不能出現空字符或者字符串 | resolve: {extensions: ['','.css']} | resolve: {extensions: ['.css']} | 參考1 |
Error: Chunk.entry was removed. Use hasRuntime() | "extract-text-webpack-plugin": "^1.10.0", | "extract-text-webpack-plugin": "^2.1.2", | 版本問題 | 參考1 |
Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s). | loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']), | ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) | 新的版本只支持一個參數 | npm run dev 命令運行結果錯誤提示 |
| 找不到API Schema | modulesDirectories | modules | 屬性名稱變更 | npm run dist 命令運行結果錯誤提示 |
| 找不到OccurenceOrderPlugin | new webpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin() | new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin() | 移除了OccurenceOrderPlugin 和 NoErrorsPlugin | 參考1 |
Redux
- 簡單的講他是一個管理單向數據流的框架，根據業務復雜度可以把控其中顆粒度。一開始學習的時候感覺反而把項目復雜化，看原理也是半懂不懂，后面不斷實踐理解前面看的內容，總歸理論要與實踐結合起來。
模型如下：簡單的數據流向可以看作 View -> Action -> (Middleware) -> Reducer
React-router(2.x)
react-router(2.x)與react-router(4.x)的還是不同的，當然主要是寫法上，所以沒更新到4.0
另外， 發布打包時使用nginx等應用服務器托管的時候需要配置下，所用路由走index.html文件，不然路由會被攔截。
Antd(2.13)
antd是（螞蟻金服體驗技術部）經過大量的項目實踐和總結，沉淀出的一個中臺設計語言 Ant Design，使用者包括螞蟻金服、阿里巴巴、口碑、美團、滴滴等一系列知名公司，其中包括了移動端，Web端，Pro(最近剛出)
遇到錯誤可以翻看 Antd的issues，基本能解決。
提 Issues 的話要符合一定規范，一開始感覺麻煩，后來看了 提問的智慧，恍然大悟這部分的必要性。
擴展內容
功能擴展
- 討論區數據統計分析，主要想知道一段時間的熱點內容。
測試及優化
- 現在項目代碼是沒有進行單元測試，后續學習集成JEST測試
- 優化部分頁面的組件以及一些 bugs
)
-自動水平伸縮)
方法)
)
)
)
