搭建 - React - 开发环境

一、创建React项目

1、全局安装react脚手架
  cnpm install create-react-app -g
2、创建react应用
 create-react-app my-app
3、进入myapp目录，运行应用
 cd my-app
 cnpm start

二、配置axios

1、安装axios
 cnpm install axios --save
2、在src文件夹下新建一个文件夹为plugins，在plugins下创建axios.js文件，配置axios。

import axios from 'axios';
axios.interceptors.request.use((config) => {
    config.url = '/api' + config.url;
    return config;
})
axios.interceptors.response.use(({data}) => {
    return data;
})
export default axios;

3、在src/index.js中引入axios，并挂在到react原型上

import axios from './plugins/axios'
React.Component.prototype.$http = axios;

4、使用

• 类组件访问
   通过 this.$http.API 访问接口。注意：只能在类组件中通过this访问
• 函数组件访问
   React.Component.prototype.$http.API 访问接口。
 PS： 因为axios是定义在React.Component.prototype原型上的，是为了方便在类组件中使用

三、反向代理

在create-react-app之前版本，配置http请求跨域在package.json配置，如：

"proxy": {
  "/api": {
    "target": "https://...",  //代理地址
    "secure": false,  //是否证书校验 https http
    "changeOrigin": true,  //是否开启跨域
    "pathRewrite": {
      "^/api": "/"    // 重写接口
    }
  }  
}

现在最新版本在package.json中配置反向代理只能使用字符串。
ceeate-react-app官方文档推荐使用 http-proxy-middleware管理包

• 安装http-proxy-middleware管理包
  cnpm install http-proxy-middleware --save
• 在项目src/下新建setupPorxy.js文件，写入代码：

const proxy = require('http-proxy-middleware');
module.exports = function(app){
    app.use(
        proxy('/api/',{
            target: "https://...",       //连接地址
            changeOrigin: true,         //开启跨域
            secure: false,              //是否证书校验 https、http
            pathRewrite: {
                '^/api': '/'             //重写接口，如果没有重写，反向代理的名字 api/会出现在请求接口的url参数中
            }
        })
    );
    //... 可以编写多个代理接口
}   

四、修改启动默认端口号

在package.json下配置scripts

"scripts": {
    "start": "set PORT=9000 && react-app-scripts start" // PORT指定端口号
  },

五、配置rem

1、根据屏幕宽度配置rem

• 在src/目录下index.css配置rem

html{font-size:13.33vw}
/*
 这里根据屏幕宽度为750px配置，换算：  100 / (750 / 100) 单位为 vw
 1rem = 100px;
*/

2、使用js

• 进入public/下ingdex.html配置

<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              if(clientWidth>=750){
                docEl.style.fontSize = '100px';
              }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
              }
            };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>

五、引入矢量图标

在public文件夹下创建iconfont文件夹，将下载的iconfont字体库文件放到iconfont文件夹下。
在public/下index.html引入字体库

<link rel="stylesheet" href="./iconfont/iconfont.css">

页面使用：

<i className={"iconfont icon--plus"}></i>   // 注意： 前面使用 iconfont