免费 AI IDE
学完 React 基础语法之后，最快上手的办法是做项目。项目会把组件、状态、事件、网络请求这些零散知识点串成一条解决实际问题的链路。对新手来说，好的 React 项目实战有 3 个特征：功能边界清晰、能覆盖核心 Hook、出错了容易定位。本文给你 3 个这样的项目：待办事项列表、天气查询卡片、简易计数器组合。
这 3 个项目都只需要 React 核心库，不需要路由、状态管理、UI 组件库等额外工具。每个项目我都会给出可运行的核心代码，并说明它覆盖了哪些知识点。你按顺序做完，就能对 React 的状态、事件、列表渲染、副作用有一个完整的体感。
一、为什么从项目学 React
单独看 useState、useEffect、onClick，你很难理解它们为什么要这样组合。但放进项目里，它们立刻有了角色：
useState负责保存用户输入和列表数据；useEffect负责在组件加载时请求外部接口；- 事件处理函数负责把用户的点击和输入转化成状态变化。
项目还会逼你处理真实问题：为什么数据更新了页面没刷新？为什么列表渲染要加 key？为什么接口请求会触发无限循环？这些坑只有在写项目时才会真正遇到。
和完整 React教程 相比，项目实战是「用中学」。你不需要先把所有 API 背熟，而是边查边做，做完再回头补原理。
二、选项目的 3 个原则
新手选项目不要贪大，记住三条：
| 原则 | 说明 |
|---|---|
| 覆盖核心 Hook | 至少用到 useState、useEffect、事件处理 |
| 有明确输入输出 | 用户能操作，页面能给出可见反馈 |
| 可扩展 | 基础版跑通后，能自己加筛选、排序、删除等功能 |
不要一上来就写「仿网易云音乐」，先从 50 行以内的组件开始，跑通后再叠加功能。基础语法还没练熟时，可以先在 React 基础教程 里多敲几个小例子。
很多人在学完基础后，急于做一个「像样」的项目，结果因为功能太多而半途而废。新手阶段的项目价值不在于功能完整，而在于把某个知识点用透。一个只实现添加和删除的 TodoList，比一个没有完成的电商首页更有学习价值。
三、项目一：待办事项列表
功能：输入任务，点击添加，任务显示在列表中，可以标记完成和删除。
import { useState } from 'react';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState('');
const addTodo = () => {
if (!text.trim()) return;
setTodos([...todos, { id: Date.now(), text, done: false }]);
setText('');
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<button onClick={addTodo}>添加</button>
<ul>
{todos.map((t) => (
<li key={t.id}>
{t.text}
<button onClick={() => setTodos(todos.filter((x) => x.id !== t.id))}>
删除
</button>
</li>
))}
</ul>
</div>
);
}
核心知识点：useState 管理数组、受控组件、列表渲染、key 属性。注意 key 要用稳定唯一值，这里用 Date.now() 只是演示，真实项目建议用 uuid。
这个项目还有很自然的扩展方向：给每个任务加上「完成」状态、给任务列表加上筛选按钮（全部/未完成/已完成）、给输入框加上回车提交。这些扩展都不会引入新概念，但能帮你把 useState 和事件处理练得更熟。
在写这个项目的删除功能时，新手容易直接修改原数组。记住 React 的状态更新应该是不可变的：先复制原数组，过滤掉要删除的项，再把新数组传给 setTodos。这个细节看起来小，却是很多渲染异常的根源。
四、项目二：天气查询卡片
功能：输入城市名，调用公开天气接口，展示温度和天气描述。
import { useState, useEffect } from 'react';
function WeatherCard() {
const [city, setCity] = useState('Beijing');
const [weather, setWeather] = useState(null);
useEffect(() => {
fetch(`https://api.example.com/weather?city=${city}`)
.then((res) => res.json())
.then((data) => setWeather(data));
}, [city]);
return (
<div>
<input value={city} onChange={(e) => setCity(e.target.value)} />
{weather && <p>{weather.temp}°C {weather.desc}</p>}
</div>
);
}
核心知识点：useEffect 依赖数组、异步请求、条件渲染。注意依赖数组要写对，否则容易触发无限请求。
在没有真实接口的情况下，你可以先用一个本地对象模拟返回数据，把组件结构和渲染逻辑跑通，再把 fetch 接进去。这种「先本地、后联网」的开发顺序，能帮你分清是 UI 逻辑问题还是接口问题。
如果你想让这个项目更接近真实场景，可以加上加载状态和错误提示。在 useEffect 开始请求前设置 setLoading(true)，请求结束后再设为 false；如果请求失败，把错误信息存到状态里并在页面上显示。这三个状态（数据、加载、错误）是任何异步组件都需要考虑的。
五、项目三：计数器组合
功能：多个计数器，每个可以独立加减，还能一键重置全部。
import { useState } from 'react';
function CounterGroup() {
const [counters, setCounters] = useState([0, 0, 0]);
const update = (index, delta) => {
const next = [...counters];
next[index] += delta;
setCounters(next);
};
return (
<div>
{counters.map((c, i) => (
<div key={i}>
<button onClick={() => update(i, -1)}>-</button>
<span>{c}</span>
<button onClick={() => update(i, 1)}>+</button>
</div>
))}
<button onClick={() => setCounters(counters.map(() => 0))}>全部重置</button>
</div>
);
}核心知识点：数组不可变更新、批量操作。这个例子很小，但能帮你理解为什么 React 推荐「先复制再修改」的状态更新方式。
这个项目的另一个价值是让你体会「状态提升」。当你想让所有计数器同时重置时，状态必须放在父组件里。这是 React 里非常核心的设计思想：状态应该放在能访问到所有需要它的地方的最低层级。
这个项目的另一个练习方向是「派生状态」。比如你可以根据所有计数器的值计算总数、平均值，或者判断是否有计数器超过某个阈值。派生状态不需要单独用 useState 保存，而是在渲染时直接计算，这样能保证数据和视图始终一致。
总结
React 项目实战的关键不是项目多复杂，而是把学到的 Hook 放到真实场景里跑起来。待办列表练状态和列表渲染，天气卡片练 useEffect 和异步请求，计数器组合练数组状态更新。三个项目做下来，你对组件化的理解会扎实很多。
要点带走：
- 项目要小、边界清晰、可扩展；
- 列表渲染一定要加
key； useEffect依赖数组写错是新手最常见的 bug。
下一步挑一个项目今天跑通，再尝试加一个小功能，比如给待办列表加上「全部完成」按钮。
这三个项目从状态管理到异步请求再到数组更新，覆盖了 React 最核心的使用模式。建议你不要只抄代码，而是每个项目都自己从零写一遍，报错时再对照示例找差距。写三遍和看三遍的效果完全不同，亲自动手才能发现那些看视频时察觉不到的状态更新细节。
延伸学习
- 想系统入门，React 入门课程 从组件讲到 Hooks，适合零基础；
- 在 Vue 和 React 之间犹豫，Vue vs React 深入比较 帮你从多个维度做选择；
- 学到状态管理时，React+Redux 实战 带你把状态串成可维护的代码。
常见问题
Q：项目需要配路由吗？
A：前三个小项目不需要。等你能熟练写组件和状态后，再引入 React Router 做多页面切换。
Q：状态太多怎么管理？
A：小项目用 useState 足够。组件层级深了再用 useContext，真正复杂了再考虑 Redux。
Q：接口请求失败怎么处理？
A：给 fetch 加上 catch，在页面上给一个错误提示，不要让页面白屏或崩溃。
