一、React新的前端思维方式
第一章：主要简单的介绍了下通过create-react-app来创建自己的react组件吧； create-react-app是通过npm发布的安装包，确认node和npm安装好了之后，执行→npm install --global create-react-app 就可以了。
安装create-react-app之后，可以通过执行→ create-react-app 加上“文件夹名字” 就可以创建默认的react组件了。
※1. import 是es6语法中的导入文件块的方式。es6语法是一个大集合。大部分语法功能都被最新的浏览器支持。
※2.component作为组件的基类，提供了很多组件共有的功能 例如→ class ClickCounter extends Component{ } ：就是创建一个clickcounter组件，component是clickcounter的父类。
import React, { Component } from 'react';
class ClickCounter extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {
count: 0
}
}
onClickButton() {
this.setState({count: this.state.count + 1});
}
render() {
const counterStyle = {
margin: '16px'
}
return (
<div style={counterStyle}>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count: <span id="clickCount">{this.state.count}</span>
</div>
</div>
);
}
}
export default ClickCounter;
※3.import React ，{Component} from "react"; 需要知道的是，在有jsx的时候，必须要导入React。因为jsx最终会被转译依赖于React的表达式。
（所谓的jsx是JavaScript的语法扩展，让我们在JavaScript中可以编写像html一样的代码；React判断一个元素是HTML还是jsx原则就是看第一个字母是否大写，所以组件要注意首字母大写。）
※4. 也就是react的奥义理念吧 归结为一个公式（数据驱动渲染）：
UI= render（data）；函数为纯函数，什么是纯函数，就是正经函数，没其他多余副作用，输出完全依赖于输入的函数。
※5.Dom树是html的抽象，而Virtual Dom就是对Dom树的抽象。
（virtual Dom不会触及浏览器的部分，只存在于JavaScript空间的树形结构，每次自上而下的渲染React组件的时候，会对比这一次产生的Virtual Dom 和上一次的Virtual Dom，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分就可以了）
