一步一步创建react项目。

本文也是作者第一次搭建react完整项目，可能业务不是很条理，但是涉及技术点使用是没有问题的，涉及的技术如下：

react、typeScript、antd、react-router、axios、mobx

1.作者环境（本文所用项目名称为ePlus，所以见到ePlus即为本项目名称，不再赘述）

    node: v 10.0.0
    npm:  v 5.6.0
    system: mac os
    react:  v 16.8.6
    antd: v 3.16.2

2.安装脚手架并且初始化项目

    npm install -g create-react-app        // 安装react脚手架
        create-react-app eplus --typescript    // 初始化项目(ts版本，用js同学不用加 --typescript)
    npm install --save typescript @types/node @types/react @types/react-dom @types/jest
                                                   // 安装react + ts依赖编译器
    cd ePlus                                      // 切换到ePlus   
    npm run start                                 // 启动项目

• 此时应该为下图所示：

  
  react1.png

3. 添加sass支持

npm install --save node-sass

4. 支持scss模块

新建 xxx.module.scss, 记住，scss后缀前面一定要为module，才是scss模块化。

xxx.module.scss 内容为普通的css样式：

.error{
    background-color: red;
}

• 使用方法如下图:

  
  react2.png

5. 添加环境变量

在根目录中新建三个普通文件： .env.development 、.env.test 、 .env.production 
.env 可以创建也可以不创建，它为替补默认文件，即找不到上面三个文件时默认使用的文件。环境变量一般用于区分开发，测试，生产环境的变量，比如：api路径等。

文件中写环境变量，如：
REACT_APP_CONST_INT=123
这样就可以在react项目组件中使用，需要注意的点如下：

.env：默认。
.env.local：本地覆盖。除test之外的所有环境都加载此文件。
.env.development，.env.test，.env.production：特定环境的设置。
.env.development.local，.env.test.local，.env.production.local：特定环境设置本地覆盖。

左侧的文件比右侧的文件具有更高的优先级：
npm start：.env.development.local，.env.development，.env.local，.env
npm run build：.env.production.local，.env.production，.env.local，.env
npm test：.env.test.local，.env.test，.env（注.env.local丢失）

（还有环境变量拓展，跳转到 facebook.github.io/create-react-app查看使用方法）

• 使用方法如下图:

  
  react3.png

6. 添加路由

npm install --save react-router-dom 

路由的详细使用方法

7. 添加axios

npm install --save axios
然后新建一个ListServer.ts 文件，用于发送ajax

1. ListServer.ts 内容如下图所示：

   
   react4.png

2. List组件代码如图所示：

   
   react5.png

3. 这样就能获取到数据，进行视图展现了！
   结果图如下:

   
   react6.png

（到此，基本可以实现react请求数据并展示在页面上，但是没有全局状态管理器配合axios一起使用，项目大了之后不便于维护，接下来会讲更高级用法）
axios教程地址

8. 添加状态管理器mobx（也可以使用redux）

添加mobx： 
npm install mobx mobx-react --save

1. 新建stores文件夹，stores里面分别新建add.state.ts、index.ts,这是状态管理器管理文件

   //add.state.ts
   import { observable, action, computed } from 'mobx';
   class AddState {
     @observable num1 = 0;
     @observable num2 = 10;
     
     @action addNum1 = () => {
       this.num1 ++;
     };
     @action addNum2 = () => {
       this.num2 ++;
     };
     @computed get total() {
       return this.num1 + this.num2;
     }
   }
   
   const addState = new AddState();
   
   export { addState };
   
   

   //index.ts
   
   import { addState } from './add.state';
   export { addState };
   
   

2. 添加提供者，在根目录index.ts 中写入provider， 如下：

   
   react8.png

• 注入到组件中，现在比如需求为 点击按钮，增加数字， 增减按钮组件与数字增加组件 为兄弟组件，同时在app.tsx中渲染
  按钮组件，实例图如下：
  增减按钮组件
  

  react9.png
  数字增加组件
  react10.png

• 最终结果图,点击两个按钮，都会增加按钮下方数字

  
  react11.png

mobx使用教程

9. 添加 antdesign UI组件库

添加antd: 
npm install antd --save
添加按需加载，此为按需加载需要组件，不必要组件不会加载，优化项目加载性能: 
npm install babel-plugin-import --save-dev
npm install customize-cra --save
npm install react-app-rewired --save

接下来步骤：

1. 项目根目录下面新建 config-overrides.js

2. 在config.overrides.js 中写入

   const { override, fixBabelImports } = require('customize-cra');
   module.exports = override(
     fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css'
     }),
   );
   
   

3. 在组件中使用antd

   
   react7.png

注意：按需加载只会讲 引入的组件加载进来
转换事例：

```
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

  ↓ ↓ ↓ ↓ ↓ ↓
  
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
```

babel-plugin-import加载转换规则

到此react基本所依赖的框架搭建完毕，有问题请在下方留言，共同探讨～