React 实践：可筛选的学习记录板

这个项目实现新增学习项、完成切换、按标题搜索和只看待学。目标是把状态更新、派生列表和表单验证连起来。数据只保存在组件内存，刷新会恢复初始值；它还没有服务端、登录和持久化。

建立工程

准备满足当前 Vite 要求的 Node 和 pnpm，在新目录执行：

pnpm create vite@latest study-react --template react-ts
cd study-react
pnpm install

下载 App.tsx 覆盖 src/App.tsx，下载 index.css 覆盖 src/index.css，保留模板 main.tsx 的 StrictMode 和入口。然后运行：

pnpm dev
pnpm build

build 应同时运行模板的类型检查和生产构建。后续模板若修改了脚本，检查 package.json 的 build 命令，不能只凭名字认定已检查类型。

应用保存 lessons、draft、query、onlyPending 和 error。visible 由 lessons 与筛选条件推导，不再维护副本。新增先 trim 并拒绝空标题，再生成稳定 ID，完成操作通过 map 创建新数组和新记录。

setLessons(current => current.map(item =>
  item.id === id ? { ...item, done: !item.done } : item));

如果未来把列表交给多个页面使用，应提升共享数据与修改入口，或接入查询层；不必在这个大小的工程里先引入全局库。输入草稿和显示偏好也不应未经区分地全部上传。

表单有显式 label、原生 submit 按钮、错误提示和结果数量。列表空时区分“没有匹配项”与“没有原始数据”；这里初始数据固定存在，所以只显示无匹配项。真实网络应用需补首次加载、刷新失败与空响应。

依次新增“网络缓存”、勾选它、启用“只看待学”、搜索不存在的标题、提交纯空格。确认完成项被筛掉，搜索不修改原列表，空标题有错误提示。只用键盘重复一次，并在窄屏和 200% 缩放下检查换行。

练习：让 query 与 onlyPending 写入 URL，要求刷新和前进后退保持条件；再给本地数据加带版本的存储适配层。读取旧数据时必须验证格式并处理存储失败，不能直接 JSON.parse 后断言类型。

进阶时为新增和完成操作抽出纯函数，补未知 ID、重复完成和旧格式迁移测试。需要 SSR、嵌套路由或服务端数据时，比较 React Router 框架模式或 Next.js 的适用条件，本项目仍是 Vite 客户端起点。