使用React脚手架搭建项目
本篇文章所用到的官方网站：
- Node.js中文网
- React官网
- React中文官网
- npm官网
- Ant Design
- redux官网
- redux中文网
前言（已安装过Node.js的可直接跳到脚手架）
1、安装Node.js以及nrm 网速管理工具、cnpm安装工具
首先，确保自己安装了Node.js，因为我们要使用Node.js自带的npm包管理工具，如有未安装的，可自行去百度搜索Node.js，进入Node.js的官网链接: Node.js中文网.下载；
然后考虑到 npm 下载默认都是通过国外的网站下载的，因此我们需要再安装一个 nrm 网速管理工具：
npm i nrm -g
测试是否安装成功，在命令行输入以下命令以检验版本号，如果出现版本号则表示安装成功：
nrm --version
接着使用 nrm 查看当前哪个镜像源网速更快（需要一会时间测试），在命令行输入以下命令：
nrm test
稍等一会之后命令行显示：
前面出现*的代表的是你当前使用的镜像源；说明：taobao的服务器是在国内，所以相对的下载使用该镜像源的速度更快，在这里我是已经切换好了的；
如何切换镜像源：
nrm use 镜像源的名称
// 示例
nrm use taobao
另外，也可以使用 cnpm下载工具来下载，功能与 npm是一样的；
// 全局安装 cnpm
npm install cnpm -g
下面的安装示例皆是以 cnpm的安装方式来安装的，是否使用cnpm安装工具，IT界中众说纷纭，在此便不多说了。
OK，进入正题！
脚手架
2、安装React脚手架
进入React官网，找到如下图所示页面，按照文档操作；
上面的安装命令，可拆分成两个命令：
1）安装react脚手架
// 建议使用全局安装
cnpm install create-react-app -g
2）使用脚手架创建项目文件夹
create-react-app 项目名称
// 示例
create-react-app test
创建项目文件夹需要一会时间，稍侍等待……
安装完成之后命令行出现如上图所示页面，然后cd到项目文件夹：
cd test
运行项目：
npm start
检测项目是否创建成功：
运行项目之后会自动打开浏览器页面，如上图所示，出现上图则代表脚手架初步成功且运行成功！
项目文件夹目录结构如下：
接下来需要再输入以下命令将该项目文件夹目录还原：
npm run eject
命令运行过程中如果出现报错，则按顺序输入以下命令，先将文件使用 git工具提交到本地仓库存储之后再输入npm run eject：
git init
git add .
git commit -m 'first commit'
npm run eject
执行完命令之后的项目文件夹目录如下：
自此，使用脚手架搭建项目完成！
脚手架中的常用个性配置
1）自定义端口号（可选）
在 /scripts/start.js 中搜索 PORT
这个3000就是端口号，可自行修改，建议使用8000之后的数字作为端口号；
2）配置 @ 别名（可选）
// 在/config/webpack.config.js 里找到 resolve 的 alias，然后在alias中配置：
'@': path.resolve(__dirname, '../src') // 这里是将 @ 指向 src 文件夹的目录下
3）favicon.ico制作（可选）
找免费在线制作网站，加入图片，然后选择并下载 32*32的尺寸。
4）本地环境配置代理（可选）
安装 ：
cnpm install http-proxy-middleware -D
在 src 目录下新建代理文件 setupProxy.js，然后在该文件里面配置如下代码：
const {
createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://xxx.com', // 目标服务器
changeOrigin: true
})
);
};
最后，各项配置都已配置完成之后，重启项目！！！只要修改了配置文件一定要重启项目！
集成插件
3、搭建项目完成之后，毕竟我们不是来创建玩玩的，是要进行开发的；
下面就让我们来集成一些开发项目中必须用到的；
1）集成路由：
npm官网搜索 react-router-dom，为什么不是搜索安装React Router呢？可以搜索React Router，但React Router官方的解释是：React Router这个包提供了React Router的核心路由功能，但是您可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，则应该安装react -router-dom。类似地，如果您正在编写React本机应用程序，则应该安装react-router- Native。这两者都将作为一个依赖项安装反应物路由器，因此，所以我们需要安装的是：
cnpm install react-router-dom -S
点击react-router-dom，进入该网页，然后因为react-router-dom是交给其他开发团队进行维护的，所以可以通过搜索到的网页底部找到Credits进入该开发团队的首页，也是在最底部有一个开源项目Open Source Projects，点击React Router进入该网站选择对应的式web还是native，就能进入对应路由API的网站了，然后根据相关api文档进行操作；
再次点击之后，找到最底部的React Router
进入该网页之后，
选择web就是react路由的API网站了。
另外，在这里我们还需要安装一个包，这个包的作用就是实现路由懒加载（官方给的是Code-Splitting），节省性能；进入React官网找到Code-Splitting中的 Loadable Components
这段话的解释是：React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。
点击之后找到示例：
安装：
cnpm install @loadable/component -S
引入：
// 然后在需要加载路由的文件中引入@loadable/component包
import loadable from '@loadable/component'
// 引入路由
const Home = loadable( () => import('./home/Home'))
如果，在代码编译的过程中eslint不能解析import引入路由的语法，我们还需要安装另外的两个插件：
// babel-eslint 作用是把较更高版本的`ES6` 语法转化成 `eslint` 可以检测的代码
cnpm install babel-eslint -D
cnpm install @babel/plugin-syntax-dynamic-import -D // 作用：用以解析识别import()动态导入语法---并不是转换，而是解析识别
安装完成之后需要在相关的配置文件中配置：
并在.eslintrc.json中配置
"parser": "babel-eslint"
.babelrc.json中配置
// 作用：用以解析识别import()动态导入语法---并非转换，而是解析识别
"plugins": ["@babel/plugin-syntax-dynamic-import"]
ok，到这里已集成好了路由。
2）集成axios
npm官网搜索axios；
安装：
cnpm install axios -S
Axios 请求拦截器以及响应拦截器的封装
3）集成sass
npm官网搜索sass；
在工作中我们经常使用sass来进行样式的编写工作，当然还有less等，在此我们使用的是sass，因此我们需要安装：
cnpm install node-sass -D
4）集成antd（可选）
使用antd组件库；目前流行的React组件库: Ant Design；
安装：
cnpm install antd -S
5）集成redux（可选）
安装：
// 作用：创建store的
cnpm install redux -S
// 作用：把redux和react组件关联起来
cnpm install react-redux -S
// 作用：开发者工具，帮助我们进行相关的调试
cnpm install redux-devtools -S
注：关于redux的一些详细内容会在下一篇文章中介绍；
OK，集成好各种项目相关插件之后就可以进行实战开发了！
最后，使用npm run eject还原项目结构目录之后，其他文件目录几乎不变，主要是 src，结合经验推荐项目的目录结构如下：
另外，大家还可以看出在src里创建的各个分好类的文件夹，在那些文件夹中都会有一个index.js文件，作为统一的出口文件，这个统一的出口文件对该文件夹中的文件统一管理，这样有利于文件中的数据的统一管理，便于开发。
好的，本次分享就到此告一段落，如有不足之处，望大神们不吝指出！谢谢！