react-app

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
–以上是安装淘宝镜像

npm install -g create-react-app
create-react-app my-app
cd my-app
– my-app 是react项目

推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用
npm i element-react --save

开始前, 你还需要一个主题包, 这里我们推荐使用element-theme-default.
npm install element-theme-default --save

react项目中默认没有less

先安装yarn
npm install -g yarn

安装less-loader less
yarn add less less-loader

突然，您会发现在我们项目中找不到 webpack 相关配置文件。

因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让我们专注于src目录下的开发工作，不再操心环境配置。同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多。

如果我们要自定义环境配置怎么办？
项目构建完成后，会提供一个命令yarn eject，通过这个命令，我们可以把被 react-scripts 集成的配置和脚本暴露出来。

运行yarn eject
yarn eject

然后会发现项目中多了一个config文件：
webpack.config.js # 配置

修改 webpack 配置
在module.rules节点中找到 css 文件的加载规则：
找到 const cssRegex = /.cssKaTeX parse error: Can't use function '\.' in math mode at position 31: …st cssRegex = /\̲.̲(css|less)/
找到 common function to get style loaders 在 getStyleLoaders 函数中加
{
loader: require.resolve(‘less-loader’)
}

可能版本不同 详情可见 https://www.cnblogs.com/esofar/p/9631657.html

配置项目路径
找到 alias 属性在此属性内添加
‘@’: path.resolve(__dirname, ‘…/src’), --@代表项目src是根目录

安装请求数据依赖
npm install axios

首先我们解决跨域的问题
打开项目生成的package.json文件，修改文件内容如下
在文件末尾加以下属性后重启
“proxy” : {
“/app” : {
“target” : “http://cp01-bkm-ibox01.epc.baidu.com”,
“changeOrigin” : true
}
}
然后项目会打不开报错原因是这里配置proxy只能是字符串，这个是一个好大的坑所以不能配置多个代理
只能如下添加
“proxy” : “http://127.0.0.1”,

如果想用多个代理设置的话那么只能使用代理中间件配置。
安装代理中间件
npm install http-proxy-middleware
在项目中src文件夹下 加 setupProxy.js 内容如下

// 引用依赖
const proxy = require(‘http-proxy-middleware’);
// proxy 中间件的选择项
const options = {
target: ‘http://localhost:8000’, // 目标服务器 host
changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
pathRewrite: {
‘^/api’ : ‘/’, // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
},
router: {
‘dev.localhost:3000’ : ‘http://localhost:8000’ //对象/函数，重新指定请求转发目标
}
};
// 创建代理
const exampleProxy = proxy(options);

module.exports = function(app) {
app.use(’/api’, exampleProxy);
}

这里一定要注意配置完以上代理 要不然配置更新不了

下来咱们就可以请求数据了

首先介绍一下react的生命周期吧
学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助

//初始化

页面初始化 constructor
constructor(props) {
super(props); // – 必须写在class方法中，继承是使用extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。
this.state = {}; // – 这里是本页面的值
}
componentWillMount() // – 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

componentDidMount() // – 组件渲染之后调用，只调用一次。

render() // – react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

//更新
shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

componentWillUpdata(nextProps, nextState) // – 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
componentDidUpdate() // – 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

//卸载
componentWillUnmount()
每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

更新state需要用this.setState()来更新状态，这个很类似微信小程序的setData()，state一发生改变，绑定那些状态的试图也会相应刷新改变。

下来我们安装router，实现路由功能
npm i react-router-dom --save

exact
exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。

如：


//这种情况下，如果匹配路由path=’/page’，那么会把Home也会展示出来

所以我们添加exact来解决上述问题。