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：输入组件，包含输入框和“添加”按钮，负责接收用户输入并触发添加操