React+Mobx框架搭建的后台管理系统，以及对应新手需要掌握的技能介绍
- 《React中文文档》https://react.docschina.org
- 《React菜鸟教程》https://www.runoob.com/react/react-tutorial.html
- 《React.js 小书》http://huziketang.mangojuice.top/books/react/
- 《Mobx使用方法》https://www.jianshu.com/p/7c07a5a26726
- 《Ant Design组件》https://ant.design
- React：中文文档
- 脚手架：Create React App
- 数据状态管理：Mobx
- 路由：react-router-dom
- HTTP请求：axios
- 图表：Echarts
- Ant Design组件之响应式布局
- Ant Design组件之字体图标
- Ant Design组件之50多种内置组件
- 额外的第三方精选组件
- 书写less样式
本地开发环境运行会在浏览器打开http://localhost:3000，线上生产环境运行会压缩代码并输出到build目录。
- 安装包
npm install- 本地开发环境运行
npm start- 线上生产环境运行
npm run build主要的代码在src目录下，包括mobx数据定义、公共工具方法类、公共组件和业务组件以及各个路由对应的页面，接下来我会在下面详细讲解各部分功能及作用。
react-build
├── README.md
├── node_modules
├── config-overrides.js // 扩展的Webpack配置
├── package-lock.json
├── package.json
├── .gitignore
├── public // index.html首页相关信息
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── _stores // mobx数据定义
│ └── CommonStore.js
├── _utils // 公共工具方法类
│ └── Chart.js
├── components // 公共组件和业务组件
│ └── Fold
├── containers // 各个路由对应的页面
│ ├── Analysis
│ ├── Home
│ ├── Login
│ ├── Main
│ ├── Permission
│ ├── App.js
│ └── App.less
├── images
├── less
├── dataProxy.js // http拦截器
├── index.js
├── routes.js // 一级路由配置
└── setupProxy.js // 服务的代理配置
React是由Facebook出的UI框架，但因为其具有很高的性能且轻便，代码逻辑非常简单，搭配第三方组件能够快速构建起强大的前端系统架构。
React相比Angular的优点：
- 简单易上手，Angular是一个全面的框架，学习曲线非常高。
- 加载更快，Angular因为引入的依赖太多，加载速度会慢一点。
- 组件灵活，react很多组件是社区第三方贡献，而Angular除了业务组件外，其他很多都内置官方库如路由、动画等等。
推荐学习路线：
- 《React菜鸟教程》是一个面向新手非常友好的教程，看完基本可以上手了，不建议看官方文档，官方文档中文读起来生涩，不好懂。
- 《React.js 小书》是一个进阶的教程，这个是从原理的角度解析React原理。
Create React App是使用最为广泛的脚手架，通过它的命令，能够快速生成一个包含webpack的前端自动化工具、单元测试、eslint等前端架构都有的代码。而不用自己费劲心思的去构建，如果业务上需要自定义的构建配置，在config-overrides.js中可以拓展修改，比如支持babel的装饰器等等。说明一点是，这个脚手架只是一个空架子，后面针对业务的组件以及模块需要自己去整理，这一点对后期代码维护和开发比较重要，这个在上面的层级结构有体现。
react对数据的改变官方使用方法有state和props，但是当页面非常多且需要跨页面传值，用起来非常麻烦。Mobx就是为了解决数据存值问题，通过定义观察者模式observable, observer 和 action来控制数据流。这个使用方法可以最上面的链接，同时本项目中src/_stores/CommonStore.js，也有demo去定义和使用数据。
react-router-dom 是html historyAPI提供的一套路由机制，如果你想在html中使用跳转<Link to="/home" />，如果你想在方法内使用跳转this.props.history.push('home')，基本上路由跳转上面两就满足了。还有就是注册路由，这里分为一级路由和子路由，这个在项目中有体现。
常用的发请求的方式，有使用问题的可以看文档，比较简单。这里主要注意两个点：
scr/dataProxy.js在这里面可以全局拦截，比如未登陆接口返回403，那么，这里可以获取状态码，从而实现跳转。scr/setupProxy.js在这里面可以做后台代理，比如请求接口/api/login，这里配置一下匹配规/api和后台地址http://localhost:5000即可实现，所有接口 都走该代理。
画图的，这个配置看官方文档就OK。
这里的Ant Design响应式布局和Bootstrap的栅格布局极为相似，可以代替Bootstrap。使用方法看看文档就OK。
这里的Ant Design内置的字体库，一般也够用，不够用的话可以使用阿里的iconfont字体图标库。
Ant Design内置组件基本涵盖能够想到的大部分组件，如果发现有类似的场景可以直接用。
第三方组件也有，尽量不自己造轮子，百度或者谷歌，npm上搜索，应该会有。
本项目中使用的预处理器less来代替css，这个用的比较多的就是变量和嵌套，可以看看官方文档了解一下。
- 对js和css语法有基本的了解。
- 对开头推荐的《React菜鸟教程》《Mobx使用方法》《Ant Design组件》有基本的阅读和了解。
可以使用Ant Design响应式布局，通过<Col>的断点配置，来实现不同终端的现实，当然如果不喜欢用的话，可以安装bootstrap。
- 需要了解mobx数据流管理流程，这个跨页面传递参数必备的。
- 深刻贯彻React组件化思想，万物皆组件，就是能独立的模块全部独立。
- 了解react写法，这个和之前的写法不一致，看文档熟悉掌握。
- 注意组件和页面的区别，对应的代码放到对应的文件夹中。
本项目涉及到的技术点均已罗列出来，如果遇到问题可以Google 技术点+问题查找结局方案，或者找我协助解决。
上面就是React框架技术使用指南，可以配合这个项目了解掌握，有任何问题可随时联系我。