React制作个人博客小结-白红宇

身为一个工作三年的前端萌新，怎能没有自己的个人博客，初中高中也都是三年时间，做一个人博客，也当给自己这三年交一份作业。

废话少说，进入正题

博客链接：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的博客页面或者别的，总之这样的学习方式虽然很痛苦，还是比较惯用的。