用 React.js 寫一個最簡單的 To-do List 應用
前段時間忙著找工作去了，有段時間沒有寫博客了，上一篇還是三月份的，今天來更新一篇。
最近在學 React.js，也寫了一些練習的項目，之前參考網上的一些代碼寫了一個很簡單的 to-do list。對于初學者來說，寫個基本的 to-do list 對于理解 React 中的一些概念及語法倒是挺有幫助的。
現在很多的 React 項目中已經開始使用 ES6 來寫了，不過因為我在學習 React 的時候看的教程大多都是用 ES5 寫的，我這里還是用的還是更熟悉的 ES5 寫法，雖然有點落伍了，但若想改成 ES6 版本倒也挺方便的。
文件目錄
在正式的生產項目中，使用 webpack 可以很方便地對我們的文件進行打包，這里因為程序比較簡單，直接用 <script> 標簽將 React 組件引入了。
首先新建一個 index.html 文件，引入相關的資源文件。
再新建一個 js 文件夾，我們使用 React 需要這樣的兩個文件： react.js 和 react-dom.js ，你可以使用 cdn 引入，這里直接將文件下載放在了 js 文件夾內。
js 文件夾內還有一個 script.jsx 文件，我們程序的主要內容就放在這個文件中。注意這里的后綴名是 jsx ，表示它是使用 React 的 jsx 語法來寫的，引入它的時候按如下寫法：
<script type="text/babel" src="js/script.jsx"></script>
同時還需要一個 browser.js 文件，它可以讓 jsx 語法的文件在瀏覽器中運行。
最后我們再建立一個 css 文件夾，存放樣式文件，我的項目中使用了 Bootstrap 的樣式，所以需要下載 Bootstrap 的樣式文件。
程序功能
作為一個最簡單的 to-do list，這個程序沒有過多的功能。可以從demo 里看出，它的功能如下：
-
顯示每一個任務
-
可以將任務標記為已完成，以區分未完成的任務
-
加入任務 / 刪除任務
-
統計任務總數和完成的任務數量
作為一個示例程序，以上就是它的功能了。
組件結構
我們可以使用 React 開發出各種組件（component），利用不同組件的功能來實現一個應用。我們這里創建的組件有:
TodoBox
-TodoList
-TodoItem
-TodoFooter
-TodoForm
-
TodoBox 是最外層的組件，其余的都是它的子組件
-
TodoList 是各個單獨的待辦任務的集合
-
TodoItem 即為一條單獨的待辦事項
-
TodoFooter 對上述的事項進行統計
-
TodoForm 用于加入新的項目
屬性的傳遞
React 的組件有兩種不同的屬性， state 和 props 。可以用一種簡單的方法來區分它們：如果這個屬性是其父組件傳給它的，那么就是 props ，反之如果一個屬性是組件自己的，那么就是 state 。
具體什么時候用 state ，什么時候用 props ，可以參考這幾條：
-
Is it passed in from a parent via props? If so, it probably isn’t state.
-
Does it change over time? If not, it probably isn’t state.
-
Can you compute it based on any other state or props in your component? If so, it’s not state.
這里我們從代碼來看看，屬性是如何從父組件傳遞到子組件的。
每一條待辦事項有這樣的幾個屬性:
- id: 任務的編號
- task: 任務的具體內容
- complete: 任務是否已經完成
我們看看屬性的傳遞過程。
首先在 TodoBox 組件的 state 中有一個 data 對象：
data: [
{"id": "0001", "task":"吃飯", "complete": "false"},
{"id": "0002", "task":"睡覺", "complete": "true"},
...
]
TodoBox 組件的 render 函數中會有 TodoList 組件：
<TodoList data={this.state.data}
// 其他的屬性及方法寫在這里
/>
這樣 TodoBox 組件的 data 屬性就傳遞給了子組件 TodoBox 。在 TodoBox 中通過 this.props 來引用這一屬性，即 this.props.data 。
TodoBox 組件還有子組件 TodoItem ，可以將屬性繼續傳遞下去。在 TodoList 組件的 render 函數中這樣寫：
var taskList = this.props.data.map(function(listItem) {
return (
<TodoItem
taskId={listItem.id}
key={listItem.id}
task={listItem.task}
complete={listItem.complete}
// 其他的屬性及方法
)
}, this);
在 TodoItem 組件中就可以用 this.props.taskId 獲得任務的 id 了。
函數的傳遞
我們的程序中需要的函數有這幾個：
- handleTaskDelete: 根據id刪除一項任務
- handleToggleComplete: 切換一項任務的完成狀態
- handleSubmit: 新增一項任務
- generateId: 給新增的任務一個隨機的id
在 React 的組件中傳遞方法與傳遞屬性類似，現在 TodoBox 組件中有一個 handleToggleComplete 函數，將它傳遞給 TodoList 組件：
<TodoList toggleComplete={this.handleToggleComplete}
// 其他的屬性及方法寫在這里
/>
這樣你就可以在 TodoList 組件中通過 this.props.toggleComplete 來調用這一方法了，你也可以將這一方法繼續向下一層的組件傳遞。
程序的運行
你可以下載 GitHub 上的項目文件 ，再用 python 開啟一個 HTTP 服務器，就可以打開 http://localhost:8000/ 查看運行結果了。
git clone https://github.com/noiron/simplest-react-todolist.git
cd simplest-react-todolist
python -m SimpleHTTP server // open a server with python
來自： http://www.wukai.me/2016/06/19/write-a-simplest-todolist-with-reactjs/