传统的 TODO 应用太无聊？来点有生活气息的！这次我们用 React 搞点轻松的东西：写一个能“动态更新”的摸鱼计划表，不仅练手，还能缓解你的编码疲劳。
为什么不是又一个 TODO？
几乎每个学习 React 的人，都会从“写一个 TODO 应用”开始。
但说实话，那种“吃饭、睡觉、写代码”的清单，做起来毫无乐趣。于是我决定换个思路，做个更贴近打工人日常的任务列表，名字就叫：摸鱼计划表。
它可以：
- 显示一组轻松幽默的任务；
- 模拟“服务器响应”，让数据在几秒后动态更新；
- 用简单的状态管理（useState）和组件渲染完成页面；
- 加一点样式，让 UI 不那么枯燥。
是不是比“写一个 TODO App”有意思多了？
开发环境：用 Vite 初始化一个 React 项目
为了让项目跑得快、改得爽，我用 Vite 搭了个 React 脚手架：
npm init vite@latest
选择配置：
- 项目名：
todos - 框架选 React
- JavaScript（初学者友好）
然后安装依赖并运行：
cd my-react-app
npm install
npm run dev
浏览器自动打开 http://localhost:5173，开发环境就起来了。
核心功能：摸鱼计划 = 一张“动态任务清单”
页面效果很简单，一张表格，里面列着我们一天要完成的“高质量摸鱼动作”。
我们需要两个状态：
todos：任务列表title：表格标题
用 useState 处理：
const [todos, setTodos] = useState([
'假装努力 15 分钟',
'和猫猫深度对话',
'进行一次高质量摸鱼',
]);
const [title, setTitle] = useState('今日摸鱼计划');
模拟异步更新：React 的状态响应力体现出来了
现实里，任务经常不是一次性就到位的。我们可以用 setTimeout() 来模拟“服务器发来新任务”的感觉：
setTimeout(() => {
setTodos([
'假装努力 15 分钟',
'和猫猫深度对话',
'进行一次高质量摸鱼',
'灵魂出窍练习（进阶）',
]);
setTitle('摸鱼成就解锁中...');
}, 5000);
5 秒后，任务列表自动更新，React 会自动触发重新渲染，完全不需要手动操作 DOM。
表格展示：用 .map() 动态生成任务项
JSX 的语法让我们可以像写 HTML 那样组织结构，又能在里面插入 JS 表达式，渲染任务列表自然不过了：
<table>
<thead>
<tr>
<th>序号</th>
<th>任务</th>
</tr>
</thead>
<tbody>
{todos.map((item, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>{item}</td>
</tr>
))}
</tbody>
</table>
小提示：React 要求循环渲染时每个元素有唯一 key，这里只是练手，可以用 index。
页面样式：用 CSS 文件快速上色
React 没有限制你怎么写样式，最直接的方式就是老老实实写 CSS 文件：
/* App.css */
.title {
background-color: green;
color: white;
padding: 1rem;
}
然后在组件中引用使用：
import './App.css';
<h1 className="title">{title}</h1>
写在最后：React 没你想得那么重
这个“摸鱼计划表”虽然只是个小玩具，但你已经掌握了：
- 如何用 React 搭建项目；
- 怎么用
useState管理数据； - 如何响应状态变化并自动刷新页面；
- JSX 的基本写法；
- 简单样式的添加方法。
写这个项目的过程是轻松的，也是我学习 React 时觉得最放松的时刻。如果你也觉得 TODO 太千篇一律，不如给它加点幽默、加点人味。
🧪 如果你也做了自己的“计划表”，欢迎发给我看看！我们一起，摸鱼不摸鱼，至少代码写得有趣 🐟
