4.2 项目实战：Todo 待办事项 App

难度：⭐⭐ | 预计时间：1 小时 | 技术栈：React + LocalStorage

学习目标

• 用 /plan 先规划功能再动手
• 分步实现：先核心功能，再优化界面
• 让 AI 帮你写测试
• 掌握 React 项目的 AI 辅助开发流程

---

项目需求

一个功能完整的 Todo 应用，支持：

• 添加、删除、编辑待办事项
• 标记完成/未完成
• 按分类筛选（工作、生活、学习）
• 优先级标记（高、中、低）
• 数据持久化（LocalStorage）

第一步：用 /plan 规划

注意

不要直接让 AI 写代码！先用 /plan 让它想清楚再动手。这是效率篇学到的核心技巧。

/plan 用 React + TypeScript 创建一个 Todo 待办事项应用。

功能需求：
- 增删改查待办事项
- 分类管理（工作、生活、学习）
- 优先级（高/中/低，用不同颜色标识）
- 标记完成/未完成
- LocalStorage 持久化
- 响应式布局

请先给出实施计划，包括：
1. 项目结构
2. 组件划分
3. 状态管理方案
4. 实施步骤

审查 AI 给出的计划，提出你的修改意见，确认后再让它执行。

第二步：分步实现

按照确认好的计划，分步实施：

按照计划的第一步，先创建项目结构和基础组件

现在实现添加和删除功能

加上分类筛选和优先级标记

最后实现 LocalStorage 持久化

第三步：让 AI 写测试

为 Todo 应用的核心功能写单元测试，使用 React Testing Library。
至少覆盖：添加、删除、标记完成、筛选这几个功能。

学到了什么

• [x] /plan 先规划后执行的开发模式
• [x] 分步实现，逐步完善
• [x] AI 辅助编写测试
• [x] React 项目的完整开发流程