1. 新建一个TodoList组件
新建的TodoList.js的内容
import React, { Component } from 'react';
class TodoList extends Component { render() { return ( <div> todolist </div> ); } }
不过记得你还需要把自身导出去，外部才可以引用，最终我们完成的TodoList功能如下：
可以添加一个任务，并进行删除和完成操作。
1.1 添加一个列表
下面提交有了还需要写一个列表，把提交内容显示出来：
这样写是会有问题的，JSX要求组件render返回的内容外层必须有一个包裹元素，上面组件就违反了JSX语法要求，所以这样修改完成：
import React, { Component } from 'react';
class TodoList extends Component { render() { return ( <div> <div> <input /> <button>提交</button> </div> <ul> <li>学英语</li> <li>learning react</li> </ul> </div> ); } }
export default TodoList;
有时候我们不希望最外层套一个DIV怎么办？这个时候我们在React16版本里面，提供了一个Fragment占位符，然后通过Fragment替代最外层的DIV标签：
2. React的响应式设计思想与事件绑定
假设我们在输入框输入内容，点击提交，然后更新到列表。
原先的思想：输入值，给提交按钮绑定事件，然后获取input的value，然后通过操纵DOM节点把内容挂载到DOM树里面。
React：响应式框架，强调不要操纵DOM，操纵数据，React感知变化，自动操纵DOM进行对应更新，关注数据层的操纵。
需要两组数据，一组存储input的值，还有一组存储列表的每一项。
2.1 构造函数
构造函数最优先执行的函数，首先固定的写法：接受一个props的参数：
super指的是执行Component的构造函数并传入props参数。
上面这些是固定写法，必须写的。
接着我们需要把组件数据定义到状态里面，可以存储很多东西，上面分析了需要存两组数据：
2.2 数据绑定
接着我们需要把input框的value和组件数据绑定，可以这样写，基于JSX语法需要加一个大括号来引用数据：
数据一变化，页面就会响应数据的变化。
但是此时在input框输入时候，里面的显示内容不会改变。因为inputValue的值没有发生改变，需要我们需要操纵数据来操纵页面。
2.3 事件绑定
React此时需要绑定事件，注意这里和原生不同的是我们需要大写第二个字母：
接着我们看一下打印内容的target对象，其实这个就是指的是input框对应的DOM节点，所以这里就可以获得值了。
我们直接打印e.target.value，所以我们可以尝试直接获取这个value，并改变一下组件数据，那么就应该会跟着变吧？
这样写会报错，可以猜测是this的指向有问题，我们打印一下看看this指向哪一个，说明this指向不对，不是指向组件本身，所以需要加这么一步骤：
这是用组件的this赋值给函数的this，所以这个时候就可以了。
但是这时候还是不行，其实是因为在React中你想要改变state的状态，不能直接引用来修改值，需要使用提供的setState方法来改变：
这个时候就可以了