身为一个工作三年的前端萌新，怎能没有自己的个人博客，初中高中也都是三年时间，做一个人博客，也当给自己这三年交一份作业。
废话少说，进入正题
博客链接：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的博客页面或者别的，总之这样的学习方式虽然很痛苦，还是比较惯用的。