身為一個工作三年的前端萌新，怎能沒有自己的個人部落格，初中高中也都是三年時間，做一個人部落格，也當給自己這三年交一份作業。
廢話少說，進入正題
部落格連結：http://dazhi.zbzero.com(因為域名還沒又通過備案，先從朋友那裡解析出來了一個)
整個專案中：
後臺用的egg.js
資料庫用的mongodb+mongoose,
前端用的react+redux+react-router-dom
antd.js做UI庫
這篇文章主要講的是前端的部分
首先先貼一下專案目錄解構
如圖所示，
pages - 所有的頁面資料夾
components - 放元件的資料夾
service - 統一管理介面的資料夾
store - redux狀態管理資料夾
style - 靜態資原始檔夾 （後期上線之前將所有圖片放到了阿里雲oss物件儲存中，在頁面直接引入的網路連線）
因為引入了antd.jsUI庫所以首先要先按照官網上的配置一下
首先我們需要按需引入
mport {Row, Col, Layout} from 'antd';複製程式碼然後配置按需載入，
安裝 react-app-rewired
cnpm i react-app-rewired -S複製程式碼再將package.json中的scripts修改為
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": " react-app-rewired test --env=jsdom",
"eject": " react-app-rewired eject"
},複製程式碼專案根目錄建立一個 config-overrides.js 用於修改預設配置。
配置自定義主題
安裝 babel-plugin-import
cnpm i babel-plugin-import -D複製程式碼安裝react-app-rewire-less
cnpm i react-app-rewire-less -D複製程式碼編輯 config-overrides.js
const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function (config, env) {
config = injectBabelPlugin(['import', {libraryName: 'antd', style: true}], config);
config = rewireLess.withLoaderOptions({
modifyVars: {"@primary-color": "#dbd3af"}, // 配置的主題顏色
})(config, env);
return config;
};複製程式碼之後再重啟react
配置路由
頁面最外城包一層router，history可以控制路由跳轉事件，中間可以做一些判斷（本人沒用上）
redux配置
如路由上的圖所示，我用了react-redux的Provider,connect進行資料傳輸，將store繫結到props上，這樣無論是父子元件資料傳輸，孫爺元件傳輸，還是同級元件資料傳輸，react-redux全部搞定。
在redux中引入外掛
主要用到了logger和promise promise主要是用來做非同步操作的，thunk能做到的promise同樣也能做到，所以thunk就沒怎麼用，logger是用來列印的
在頁面中呼叫connect,這樣看其實connect就是函式執行返回另一個函式，函式裡面巢狀的元件，其實就是高階元件的用法。（元件巢狀元件）
介面配置
在redux的actions中請求介面
在元件中呼叫介面
然後資料就會通過connect繫結到props上，可以直接用了
介面用的axios，再index中講介面做了封裝，因為用的egg，所以增刪該查方法都是寫死的method.
介面的二次封裝
在元件的編寫中儘量的可複用化，同時也用到了高階元件，上面提起過，高階元件就是函式呼叫以及類的繼承。
其實整個部落格像我這麼搭建起來實在是過於的繁瑣了，如果在真實專案中是完全沒必要的，怎麼簡單怎麼來，但是基於學習的目的，我還是想將我學到的東西經過這次機會進行總結和實踐，整個專案下來，使我對redux的理解變得非常的深刻，同時也對vuex有了一些其他的靈感，有可能過一陣閒下來我會在以同樣的方式寫一版vue的部落格頁面或者別的，總之這樣的學習方式雖然很痛苦，還是比較慣用的。