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 写清功能、截图、本地运行方式
• 能向人讲清每个项目里状态是如何设计的

参考资源