React 實踐：創建你的第一個待辦事項列表

在前面的章節中，我們學習了 React 的核心概念（組件、Props、State 等）。本節將通過一個實際案例——創建待辦事項列表（Todo List），幫助你鞏固這些概念，并掌握 React 中處理用戶交互、動態數據的基本方法。

案例目標

我們將構建一個簡單但功能完整的待辦事項應用，包含以下功能：

• 輸入框中輸入文本，點擊按鈕添加新的待辦項；
• 顯示所有待辦項的列表；
• 點擊單個待辦項，標記其為“已完成”（樣式變化，如添加刪除線）；
• 點擊“刪除”按鈕，移除對應的待辦項。

準備工作

確保你已完成以下步驟：

1. 已安裝 Node.js 和 npm（可通過 node -v 和 npm -v 檢查版本）；
2. 已通過 create-react-app 創建基礎項目（若未創建，可運行 npx create-react-app todo-app）；
3. 理解 React 的基本概念：組件、State、事件處理（如 onClick）。

步驟1：規劃組件結構

在開始編碼前，先拆分待辦事項應用的組件結構。合理的組件拆分是 React 開發的關鍵，有助于代碼復用和維護。

本案例中，我們將應用拆分為 3 個組件：

1. App：根組件，管理整個應用的狀態（待辦項列表數據），協調其他組件；
2. TodoForm：輸入組件，包含輸入框和“添加”按鈕，負責接收用戶輸入并觸發添加操