本文已参与「新人创作礼」活动，一起开启掘金创作之路
第一节：定义
用来帮助程序员快速创建一个基于(xxx)库的模板项目，它帮助我们下载好了所有的相关的依赖，可以直接运行一个简单的效果，react创建脚手架：create-react-app（先安装node环境）。
第二节：安装
第1步：npm i -g create-react-app (全局安装)；(npm uninstall -g create-react-app 卸载)
或
安装淘宝镜像：
npm install -g cnpm --registry=registry.npm.taobao.org
cnpm install module
第2步：create-react-app hello-react 切换到想创项目的目录
第3步：进入项目文件 用cd
第4步：启动项目 npm start
第三节：文档结构
Node_module 相关的模块和依赖目录
Public 静态文件资源，只需留一个index.html
Src 源码文件，写我们的组件
启动应用，Hello word！
第四节：拆分组件
DEMO：todolist案例。
第一节： 前置说明
1. React本身只关注于界面, 并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互(json数据)
3. react应用中需要集成第三方ajax库(或自己封装)
第二节： 常用的 ajax 请求库
1. jQuery: 比较重, 如果需要另外引入不建议使用
2. axios: 轻量级, 建议使用
1) 封装XmlHttpRequest对象的ajax
2) promise风格
3) 可以用在浏览器端和node服务器端
第三节： axios
参考网址： github.com/axios/axios
安装：npm add axios
3.1 GET请求
axios.get('/userinfo', {
params: { ID: 12345 }
}) .then(function (response) { console.log(response);
}).catch(function (error) { console.log(error); });
3.2 POST请求
axios.post('/userinfo', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});
//post传参序列化
·安装：npm add qs
let postData = qs.stringify({ //固定语法
a:1, //参数自定义
b:1
});
第四节：配置代理
4.1 方法一
在package.json中配置："proxy":"http://localhost:端口"，端口要访问的服务器端口。
第一步：React请求访问自己的端口,案例：http://localhost:3000/
第二步：有代理去访问服务器接口，数据返回给代理。
第三步：代理在把数据返回给react请求
备注：react请求先请求当前服务的资源 没有找代理的服务。
4.2 方法二
配置setupProxy.js与src目录下，代码如下：
const proxy = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
proxy.createProxyMiddleware("/api1", {
target: "http://localhost/",//转发目标
changeOrigin: true,
pathRewrite: {'^/api1': ''}//把前缀替换掉
})
);
};
第五节：消息订阅与发布
5.1 安装PubSubJS
npm i pubsub-js
5.2 发布消息
页面引入： import PubSub from 'pubsub-js'
发布消息：PubSub.publish('udata',{name:'张三'})
5.3 订阅消息
订阅消息：PubSub.subscribe('udata',(_,data)=>{
this.setState({...data});
})
卸载：PubSub.unsubscribe(this.token);
