通過 TodoList 這么個小應(yīng)用流酬，讓你們了解如何通過 React 進(jìn)行開發(fā)涵防，今天要講的是我們?nèi)绾蝿?chuàng)建一個屬于我們自己的組件凳枝。
不知道 TodoList 的小伙伴可以查看下方鏈接：
還是打開之前的代碼，項目目錄如下：
在我們的項目文件夾下通過 npm run start 命令啟動我們的腳手架串稀。然后在瀏覽器訪問 localhost:3000 端口進(jìn)行訪問我們的首頁。
成功啟動之后狮杨，會看到我們之前的 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 這個組件是放在當(dāng)前目錄下的护蝶，所以 from './TodoList'颗管。要把這個組件顯示在頁面之上時，所以我們還要把 render 函數(shù)里的 App 替換成 TodoList滓走。
到首頁上看一下垦江，發(fā)現(xiàn)并不好用，還給我們報了錯誤搅方。
因為我們根本就沒用 TodoList 這個組件的文件比吭。在 src 目錄下新建一個 TodoList.js 文件，這個文件是跟我們 index.js 文件中第三行代碼中的 from './TodoList' 是相對應(yīng)的姨涡。
我們并沒有寫成 from './TodoList.js' 因為后綴是可以省略掉的衩藤，在構(gòu)建代碼的時候腳手架工具會自動的幫我們自動的添加上去。（可以寫后綴也可以不寫后綴涛漂，看個人喜好）
創(chuàng)建一個新的組件赏表，首先我們要先引入 reat。
import React, { Component } from 'react';
接著匈仗，通過 class 創(chuàng)建一個組件瓢剿，TodoList 是組件的名字，其他的都是固定的寫法悠轩。
class TodoList extends Component {
}
創(chuàng)建好組件之后间狂，要顯示我們的內(nèi)容通過 render 函數(shù)來進(jìn)行返回，render 函數(shù)記得加 return火架。
class TodoList extends Component {
render() {
return (
<div>TodoList</div>
)
}
}
這樣鉴象，該顯示的內(nèi)容也寫好了，但是這個組件我們還沒有辦法使用何鸡。我們還要把這個組件給導(dǎo)出纺弊，才能正常使用。
export default TodoList;
導(dǎo)出的語句是固定寫法骡男，只要最后的名字不一樣淆游，就不多做解釋了。這樣就完成了一個完整的 TodoList 組件。
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
<div>TodoList</div>
)
}
}
export default TodoList;
打開 localhost:3000 的首頁稽犁，我們的 TodoList 就顯示出來了。我們的 TodoList 肯定不止是只要這么一串字符骚亿，我們把剩余的給加上已亥，添加的主要是 html 的內(nèi)容，也不多做解釋来屠。
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 代碼虑椎，正常情況下顯示的是下面這樣的情況的。
但是腳手架卻給我們報了個錯誤俱笛。
這是因為在我們寫組件的時候捆姜，最外層的標(biāo)簽只能有一個，現(xiàn)在我們最外層有兩個標(biāo)簽迎膜，一個是 <div> 標(biāo)簽泥技，一個 <ul> 標(biāo)簽，這樣就不符合規(guī)矩了磕仅。
一般情況下珊豹，我們會在最外層套一個 <div> 標(biāo)簽，然后所有要渲染的內(nèi)容都放在這個 <div> 標(biāo)簽里榕订。
./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> 標(biāo)簽店茶，這樣就正常顯示了。
打開瀏覽器（谷歌瀏覽器）控制臺的 Elements 劫恒，會發(fā)現(xiàn)那個用來處理組件問題的 <div> 標(biāo)簽也顯示了出來贩幻，有時候我們這個標(biāo)簽也用不上，放在那里有的小伙伴會覺得別扭两嘴，這個問題當(dāng)然也是可以解決的啦丛楚。在 React 16 之后，官方提供了一個 Fragment 的占位符憔辫。
只要在 import 中引入 Fragment 就可以了鸯檬，然后把我們的 <div> 標(biāo)簽替換成 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;
簡單的頁面布局就這樣了螺垢，我們后續(xù)需要實現(xiàn)的是：
獲取輸入內(nèi)容喧务，點擊提交后添加到
ul標(biāo)簽內(nèi)，然后把內(nèi)容渲染到頁面上枉圃。
