通过 TodoList 这么个小应用，让你们了解如何通过 React 进行开发，今天要讲的是我们如何创建一个属于我们自己的组件。
不知道 TodoList 的小伙伴可以查看下方链接：
还是打开之前的代码，项目目录如下：
在我们的项目文件夹下通过 npm run start 命令启动我们的脚手架。然后在浏览器访问 localhost:3000 端口进行访问我们的首页。
成功启动之后，会看到我们之前的 Hello World 。
把 ./src/App.js 这个文件删除掉，我们重头开始写一个 React 组件。
打开 ./src/index.js 文件，把我们一开始的 App 组件修改为 TodoList 组件。
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
因为 TodoList 这个组件是放在当前目录下的，所以 from './TodoList'。要把这个组件显示在页面之上时，所以我们还要把 render 函数里的 App 替换成 TodoList。
到首页上看一下，发现并不好用，还给我们报了错误。
因为我们根本就没用 TodoList 这个组件的文件。在 src 目录下新建一个 TodoList.js 文件，这个文件是跟我们 index.js 文件中第三行代码中的 from './TodoList' 是相对应的。
我们并没有写成 from './TodoList.js' 因为后缀是可以省略掉的，在构建代码的时候脚手架工具会自动的帮我们自动的添加上去。（可以写后缀也可以不写后缀，看个人喜好）
创建一个新的组件，首先我们要先引入 reat。
import React, { Component } from 'react';
接着，通过 class 创建一个组件，TodoList 是组件的名字，其他的都是固定的写法。
class TodoList extends Component {
}
创建好组件之后，要显示我们的内容通过 render 函数来进行返回，render 函数记得加 return。
class TodoList extends Component {
render() {
return (
<div>TodoList</div>
)
}
}
这样，该显示的内容也写好了，但是这个组件我们还没有办法使用。我们还要把这个组件给导出，才能正常使用。
export default TodoList;
导出的语句是固定写法，只要最后的名字不一样，就不多做解释了。这样就完成了一个完整的 TodoList 组件。
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
<div>TodoList</div>
)
}
}
export default TodoList;
打开 localhost:3000 的首页，我们的 TodoList 就显示出来了。我们的 TodoList 肯定不止是只要这么一串字符，我们把剩余的给加上，添加的主要是 html 的内容，也不多做解释。
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
<div>
<input />
<button>提交</button>
</div>
<ul>
<li>7 点起床</li>
<li>8 点上课</li>
<li>13 点午休</li>
</ul>
)
}
}
export default TodoList;
在 return() 里面的的 html 代码，正常情况下显示的是下面这样的情况的。
但是脚手架却给我们报了个错误。
这是因为在我们写组件的时候，最外层的标签只能有一个，现在我们最外层有两个标签，一个是 <div> 标签，一个 <ul> 标签，这样就不符合规矩了。
一般情况下，我们会在最外层套一个 <div> 标签，然后所有要渲染的内容都放在这个 <div> 标签里。
./src/TodoList.js：
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
<div>
<div>
<input />
<button>提交</button>
</div>
<ul>
<li>7 点起床</li>
<li>8 点上课</li>
<li>13 点午休</li>
</ul>
</div>
)
}
}
export default TodoList;
加上最外层的 <div> 标签，这样就正常显示了。
打开浏览器（谷歌浏览器）控制台的 Elements ，会发现那个用来处理组件问题的 <div> 标签也显示了出来，有时候我们这个标签也用不上，放在那里有的小伙伴会觉得别扭，这个问题当然也是可以解决的啦。在 React 16 之后，官方提供了一个 Fragment 的占位符。
只要在 import 中引入 Fragment 就可以了，然后把我们的 <div> 标签替换成 Fragment 就可以了。
import React, { Component, Fragment } from 'react';
class TodoList extends Component {
render() {
return (
<Fragment>
<div>
<input />
<button>提交</button>
</div>
<ul>
<li>7 点起床</li>
<li>8 点上课</li>
<li>13 点午休</li>
</ul>
</Fragment>
)
}
}
export default TodoList;
简单的页面布局就这样了，我们后续需要实现的是：
获取输入内容，点击提交后添加到
ul标签内，然后把内容渲染到页面上。
