综合练习：待办清单应用

这一课你将能做到

1. 用 React + Tailwind CSS 从零搭建一个功能完整的待办清单应用
2. 实现添加、删除、完成切换、本地存储持久化等核心交互
3. 用 Vitest 编写测试，确保核心逻辑可靠

为什么要学

前面学的都是「知识点」，这一课把它们串成「项目」。真实工作不是做单选题，而是面对一个模糊需求，自己拆功能、选技术、写代码、调样式、修 bug。这个项目虽然小，但覆盖了 React 开发的核心闭环：组件拆分 → 状态管理 → 事件处理 → 副作用 → 测试。

做完这个项目，你就有了一个能写进简历的作品，更重要的是，建立了「我能独立做出东西」的信心。

先建立图像

┌─────────────────────────────┐
│      📝 待办清单             │
│  ┌───────────────────────┐  │
│  │ 输入任务...    [添加] │  │ ← 输入区
│  └───────────────────────┘  │
│  ☑ 学习 React        [删除] │  │
│  ☐ 写测试代码        [删除] │ ← 列表区
│  ☐ 部署到 Vercel     [删除] │  │
│                             │
│  共 3 项，已完成 1 项        │ ← 统计区
└─────────────────────────────┘

组件拆分：

App
├── TodoInput（输入框 + 按钮）
├── TodoList
│   └── TodoItem × N（单条任务）
└── TodoStats（统计信息）

跟着做

步骤 1：创建项目

npm create vite@latest todo-app -- --template react
cd todo-app
npm install

# 安装 Tailwind v4
npm install tailwindcss @tailwindcss/vite

# 安装测试工具
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom @vitest/coverage-v8

配置 vite.config.js：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [react(), tailwindcss()],
    test: {
        environment: "jsdom",
        globals: true,
        setupFiles: "./src/test/setup.js"
    }
});

src/index.css：

@import "tailwindcss";

src/test/setup.js：

import "@testing-library/jest-dom";

步骤 2：数据结构与状态设计

先想清楚数据长什么样：

// 单条待办
{
    id: 1,
    text: "学习 React",
    completed: false,
    createdAt: "2026-10-06T10:00:00.000Z"
}

App 组件的状态：

• todos：所有待办数组
• inputValue：输入框当前值

步骤 3：实现 TodoInput 组件

src/components/TodoInput.jsx：

import { useState } from "react";

export default function TodoInput({ onAdd }) {
    const [value, setValue] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        const text = value.trim();
        if (!text) return; // 空内容不添加
        onAdd(text);
        setValue(""); // 清空输入框
    };

    return (
        <form onSubmit={handleSubmit} className="flex gap-2 mb-6">
            <input
                type="text"
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="输入新任务..."
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg
                           focus:outline-none focus:ring-2 focus:ring-blue-500
                           dark:bg-gray-800 dark:border-gray-600 dark:text-white"
            />
            <button
                type="submit"
                className="px-6 py-2 bg-blue-500 text-white rounded-lg
                           hover:bg-blue-600 transition-colors font-medium"
            >
                添加
            </button>
        </form>
    );
}