React 项目
通过三个递进的项目，把 React 知识转化为可写进简历的作品。每个项目都建议先独立做，卡住再参考教程。
项目一：Todo 应用（半天）
目标：状态管理基本功。
功能清单：
- 新增、删除、编辑、勾选完成
- 筛选：全部 / 进行中 / 已完成
- 数据持久化到
localStorage
// 核心状态结构参考
const [todos, setTodos] = useState(() => {
const saved = localStorage.getItem("todos");
return saved ? JSON.parse(saved) : [];
});
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todos));
}, [todos]); // todos 一变就自动保存
项目二：记忆翻牌游戏（1 天）
目标：练习复杂状态与游戏逻辑。
- 4×4 卡片网格，点击翻开，两张相同则消除
- 记录步数和用时，全部配对后显示成绩
- 难点提示：翻第二张牌时用
setTimeout延迟盖回；用useRef防止快速连点
项目三：天气应用（1~2 天）
目标：真实 API 对接 + 异步状态处理。
- 用 OpenWeatherMap API（免费额度足够练习）
- 搜索城市 → 展示当前天气和未来几天预报
- 必须有：加载中、请求失败、城市不存在三种状态的处理
- 加分项：根据天气切换背景图；温度单位 ℃/℉ 切换
// 搜索逻辑骨架
async function search(city) {
setStatus("loading");
try {
const res = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${KEY}&units=metric&lang=zh_cn`
);
if (!res.ok) throw new Error("城市不存在");
setData(await res.json());
setStatus("success");
} catch (e) {
setStatus("error");
}
}
过关标准
- 三个项目全部部署上线（Vercel / Netlify 免费部署）
- 代码推到 GitHub，README 写清功能、截图、本地运行方式
- 能向人讲清每个项目里状态是如何设计的