简单的了解了 React，创建了一个 React 项目，了解 React 的基本构成组件，学习了一些简单的 JSX 语法，在 React 中需要注意一下几点：
constructor(props) {
super(props);
this.state = {
list: ['item1', 'item2']
};
}
列表唯一标识 —— key
React 中对于列表进行遍历时，React 要求对于列表的每一项都有一个特殊的标识来识别它们，称为 key。
render() {
return (
<ul>
{
this.state.list.map((item, index) => {
return <li key={index}>{item}</li>;
})
}
</ul>
);
}
修改 state 中的数据
React 中的所有操作都是对于数据进行操作，React 检测到数据变更会自动更新 DOM，但是如果我们直接对于 state 中的数据进行操作，DOM 不会改变，要使用 React 中的特定方法来对于数据进行操作。
handleAdd() {
// this.state.list.push('hello world'); // DOM 不会更新
this.setState({
list: [...this.state.list, 'hello world']
});
}
React 元素响应事件方法中的 this
如果我们直接对于 React 组件中的方法进行 this 的调用，比如调用 this.state，会提示报错，那是因为对于 handleBtnClick 方法来说，它的 this 指向的是调用它的对象，也就是 button 元素。所以如果我们想要在 handleBtnClick 方法中调用 this.state.list 而不报错的话，我们需要在 onClick 的表达式中把组件的 this 通过 bind 方法传入以改变函数中 this 的指向。
handleBtnClick() {
console.log(this.state.list);
}
render() {
return (
<div>
<button onClick={this.handleBtnClick.bind(this)}>Add</button>
</div>
);
}
