1. 安装 create-react-app

    npx create-react-app react-mycli

    cd react-mycli

    yarn start (安装yarn 命令 : npm install -g yarn )

2. 安装 Ant Desigin

    yarn add antd

3. 配置 Ant Design 按需加载

    第一步：安装 react-app-rewired 为项目添加 webpack 配置，安装完成 后 在项目的根目录中新建 config-overrides.js 文件；

    yarn add react-app-rewired

    第二步：修改 package.json 文件，修改如下 

   第三步：由于react-app-rewired 2.X 以后不在支持 injectBabelPlugin         的方式，需要安装 customize-cra

    yarn add customize-cra

    第四部：在根目录里添加 config-override.js 文件，如下所示：

  好了，基本的操作就是这样，下面我们再具体到项目中做一些配置

    第五步：配置按需加载，我们需要使用 babel-plugin-import，它是一        个用于按需加载组件代码和样式的babel插件

    yarn add babel-plugin-import

     接着配置webpack ，修改 config-overrides.js ，修改后如下所示

这样我们在组件中就可以按需引入组件库中的所需要的组件了

4. 路由配置

   第一步：安装 react-router-dom  react-router-config  

    yarn add react-router-dom

    yarn add react-router-config

    安装 @loadable/component 实现路由组件按需加载

   yarn add @loadable/component

   安装完成，一切准备就绪，下面我们就开始配置路由

   第二步：在src文件夹下新建一个路由文件夹，用于放置路由的配置文        件，命名 router ；在 router 里新建一个 router.js

   引入所需要使用的依赖包

   创建Loading 组件，引入，用于组件加载前loading显示，增加用户体        验，如下所示，至于为什么这样使用，请看 @loadable/component     文档

   创建Loading 组件，引入，用于组件加载前loading显示，增加用户体        验，如下所示，至于为什么这样使用，请看 @loadable/component     文档

​    接下来就来配置路由数组吧，最终router/index.js 配置内容如下所示：

 到这一步路由基本上配置完成了，下面来看看如何使用吧

    首先进入 App.js 引入 react-router-dom  react-router-config

    其次引入路由配置文件 router/index.js 具体实现代码如下所示：    renderRoutes 是react-router-config 提供的api ，具体使用方法请参考 react-router-config 文档

    BrowserRouter 是 react-router-dom 提供的 api ，具体使用方法请参考react-router-dom 文档

    到这一步，第一层理由已经可以实现了，浏览器里输入对应的路由，即可显示对应的组件；下面来说说嵌套路由（子路由）如何实现：

    从上面路由配置文件 router/index.js 文件中可以看出，/detail 下面存在子路由 /detail/system 要想实现其实很简单，只需要在Detail 组件中重新调用一下 renderRoutes 方法即可，当然在调用之前，还是需要引用一下 react-router-config 和 react-router-dom ,子路由的获取，通过 this.props.route 获取，详细用法参考以下代码：    renderRoutes 第二个参数是一个对象，作用是向子组件中传值用，

    子组件获取穿过来值得方法，只需要通过 this.props.属性 即可获取；代码实现如下：

    到这里，路由的配置就已经完成了。

下一章节,我们开始集成 react-redux  redux-saga  敬请期待