说好了React苦海无涯回头是岸
结果工作需要还是得往坑里跳
听了两天培训什么也没有听懂
前端代码里写逻辑的都去枪毙
React官网：https://reactjs.org/
菜鸟教程：http://www.runoob.com/react/react-tutorial.html
ES6入门: http://es6.ruanyifeng.com/
Ant Design：https://ant.design/index-cn
Redux: https://www.redux.org.cn/
Dva：https://github.com/dvajs/dva
事情是这样的，近期主动请缨翘班去听远道而来的大神讲React开发，小哥给了一套Dva框架创建的工程，然而智商不够的ST打开工程发现一行都看不懂= =
所以，开个博客记录一下摸索出的一些简单的内容，也希望能给跟ST一样懵逼的小白一些帮助。（什么只有我一个人听不懂课吗Σ(⊙▽⊙"）)
这篇里先写React和Antd和Axios吧，第二篇写Router和Redux，最后写Dva。
哎呀。坑。
一. 一些基本概念
关于Node。
Node.js 是一个JavaScript 的运行环境，可以让JavaScript运行在服务端。 Node让JS也可以写网站后台程序，可以搭建WEB服务器，相比较普通Js，Nodejs的作用更像是Jsp,Php等语言做的工作。
（上面是我胡说的我其实并不知道它是怎么回事。）
关于ES6。
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。React默认把ES6做为首选标准，其写法可能同以往不太一样。
let, const, class, extends……这些是ES6最常用的几个语法。详细介绍请看上方链接阮一峰大神的博客。
（PS:阮一峰真的是大神啊！作为一个程序员一手创了卡尔维诺中文站！国内第一卡大人忠实铁粉是一位前端工程师！！想要签名嘤嘤嘤）
（顺便……JS终于可以支持类了，所以Java程序员学React这些理论上更容易嘛→_→）
React中常见的ES6写法还有：
引入模块用import实现：
import 一个组件 from '模块地址'
导出模块用export default实现：
export default class 一个组件
定义组件用继承自React.Component的class来实现：
class 一个组件 extends React.Component {
render() {
...
}
}
这些在后面创建完工程后可以仔细研究。
二. 开发环境
Nodejs+Npm+Yarn。安装过程略。
Npm是Node.js的包管理器，是全球最大的开源库生态系统。
Yarn跟npm的作用差不多，缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此速度更快。
首先需要在系统中安装nodejs，可利用node-v，npm -v，yarn-v查看版本。
可以安装cnpm淘宝镜像，提高速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
Ide可以使用Webstorm，与IntelliJ IDEA同源，对代码高亮，提示，重构这些做得非常好。当然想写些简单操作的话也可以直接用Sublime Text。
三. 创建工程
虽然React同Vue一样可以直接在html中引入js文件，但一般来讲还是通过脚手架搭建完整工程以用做开发。
很多脚手架可以创建React项目，比如Dva就是很好的react框架，封装好了router，redux等模块。然而这里我们先用最简单基本的 create-react-app 快速构建 React 开发环境。create-react-app毕竟是官网推荐的脚手架，虽然创建的工程简单但是对初学者看着还比较友好。
npm install -g create-react-app
create-react-app my-app
此命令创建名为my-app的React工程。
创建完毕后，进入工程执行npm start，若正确则访问http://localhost:3000/可看到欢迎页面。
cd my-app
npm start
React工程结构如下，这是一个最基本的react工程：
（注：如果你是用Dva或者其他脚手架搭建的工程，可能工程结构会比这个复杂很多，但是我们不妨先从最基本的入手看看react的各种操作……）
public中默认存在index.html文件，几乎用不到但可以看一眼，可以看到只有一个id=root的div，这是我们应用组件的根节点，在react开发中我们不需要去直接编写html文件，而是通过js生成页面，渲染到这个根节点中。
src中存放css与js。
src文件中的样式表及js可以清空自己重写。
index.js是整个工程的入口，可以看到，将<App />这个组件渲染到了刚刚index.html的root节点里。
现在我们来看被引入的这个src/App.js文件。这里面有页面上显示的logo和文字，现在对它做一些修改。
回到浏览器，发现页面已被更改。
四.Antd组件库
虽然知道你们更关注工程中的数据逻辑，不过作为一个有尊严的设计师，这一步还是要先讲UI组件库。
Ant Degisn是个很好的React UI库，看起来跟我们熟知的bootstrap有点类似，从页面布局到按钮到文字提示泡应有尽有。安装需要通过以下两步。
npm install babel-plugin-import --save-dev
npm install antd --save
当然用yarn add也可以。
安装完毕后，首先，index.js中引入antd的css文件。
import 'antd/dist/antd.css';
之后，在需要用到antd的组件js中引入所需部件即可。比如想往app.js中加几个按钮。
import { Button } from 'antd';
render() {
return (
<div className="App">
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>
</div>
);
}
效果如下：
然而在ie11下，会报不支持startsWith的错。
需要安装npm install --save babel-polyfill
然后在入口文件index.js中引入import 'babel-polyfill';
因为startWith是2015年语言规范里更新的，ie始终没有支持，需要用低版本的js实现高版本的js。
这样Antd也可以愉悦的使用了。
五.基本操作
搞完按钮之后，我们来写一个最基本的，函数。
一. 比如点击按钮触发个事件
虽然语法跟以往js看起来有点差别但本质其实是一样的，上面写个函数下面onClick。
class App extends Component {
clickMe(){
alert("hi!");
}
render() {
return (
<div className="App">
<div>
<Button type="primary" onClick={this.clickMe}>点我一下</Button>
</div>
</div>
);
}
}
这样，点击之后：
二.比如前后台传输数据
传输数据一般推荐使用axios，跟ajax差不多，记得要先用npm安装。
npm install axios
首先，先用antd搞一个Table表格，在刚刚的按钮下面加上Table标签。这个标签有两个属性，columns是表头，dataSource是数据，详见Antd的官网。
render() {
var data = this.state.data; //记得定义
var columns = this.state.columns;
return (
<div className="App">
……
<Table columns={columns} dataSource={data}/>
</div>
);
}
columns和data我们在state里面定义，state简单来讲是react特有的一个存储数据的地方，state写在constructor里。
补充说明一点，constructor是ES6中类的一个默认方法，一个类必定有一个constructor方法，即使不显示定义，生成对象时也会被默认添加。它的详细介绍请继续看阮一峰大神的博客:)
constructor(props) {
super(props);
//状态值
this.state = {
columns: [{ //定义姓名、性别两列
title: '姓名',
dataIndex: 'name',
}, {
title: '性别',
dataIndex: 'gender',
}],
data: [] //先空着
}
}
这个时候，理论上界面是这样的。
回到axios上，我们希望通过点击按钮读取到表格内容。
随便找个数据读一下，我这里用的json-server把json串扔8080端口了。
在react工程里，先把axios引入。
import axios from 'axios';
然后加一个读数据的函数并跟按钮绑定上，可以看到写法跟ajax基本是一样的。
（基础路径可以设置在index.js里，此处为了简化我就直接把绝对路径贴过来了O.O）
readData(){
axios.get('http://localhost:8080/data')
.then(res => {
console.log(res); //先输出到控制台看一下
})
.catch(error => {
console.log(error);
});
}
点击按钮，理论上控制台能看到数据读过来啦。
这里注意一点，如果是读另一个ip的数据的话，会报跨域的错，用nginx代理一下才行，但nginx跨域的设置本篇先不讲了→_→
那么，把这个读过来的数据用setstate放到刚刚我们空着的state里，在react中，setstate用于给state中的状态赋值。
<Button onClick={this.readData.bind(this)}>读取表格数据</Button>
注意Button按钮绑定函数要加上bind(this)，因为在ES6中React是不会自动绑定this的，不加的话会报错'setState' undefined。
readData(){
axios.get('http://localhost:8080/data')
.then(res => {
this.setState({
data: res.data
})
})
.catch(error => {
console.log(error);
});
}
点完了之后，读来的数据就显示到表格中啦。
未完待续：
本来想把Router也放在这篇写的但是觉得这篇已经很长了，（虽然没什么有技术含量的内容吧O.O），因为我们只创了个工程读了个数据= =。。实际开发中我们一个工程会有很多页面，在React里这些页面的切换要用Router实现，喝口咖啡请戳爬坑之路二→_→
