歡迎來到「24 小時，React 快速入門」系列教學 🎓 Level 1 ～！

：Wish you have a happy learning!

1. 完成主線任務：
2. 列出 TodoApp 的功能清單
3. 使用「元件思維」設計 TodoApp
4. 習得心法：打通任督二脈，了解「元件思維」

相信大家都有用過市面上的 TodoApp，一個簡易的 TodoApp 會有以下功能：

1. 列出所有待辦項目
2. 提示待辦數量
3. 新增待辦項目
4. 編輯待辦項目
5. 刪除待辦項目
6. 切換項目處理狀態

根據以上功能，我們畫出第一版 wireframe：

：少年，我看你天資聰穎，是萬中選一的前端人，我這有一篇...祕笈，替你打通元件思維的任督二脈，你斟酌看看 🍭

將上一步的 UI 劃分成多個元件，並且替它們取上名稱：

：在這一階段我們必須盡可能得讓元件可以重複利用；思考邏輯是這樣的 - 因為 TodoList 中每一行待辦項目的 UI 都是相同的，僅顯示的資料不一樣，所以我們將待辦項目拉成一個 TodoItem 元件。

｜ 主頁 ｜ 下一關. 建置簡易的開發環境 ｜

｜ 🙋 我要提問 ｜