面向初学者的 53 章图解教程

React 19 入门：从零做出一个真实应用

这套教程以 Robin Wieruch 的《The Road to React》（2025 版）为骨架，跟着原书一路做出同一个应用 —— Hacker Stories：一个可以搜索、删除、排序、分页浏览 Hacker News 文章的小网站。每一章都配了图，并且全部代码按 React 19 的写法来写；凡是新版本和旧版本思路不同的地方，都会用「旧写法 / 新写法」对照卡片专门讲清楚。

React 19HooksVite JSXForm ActionsuseReducer TypeScriptVitestReact Testing Library React Compiler

React 是什么，一句话版

React 是一个用来构建用户界面的 JavaScript 库。它的核心思想只有一句： 界面是状态的函数 —— 你描述“在某种数据下，界面应该长什么样”，数据一变，React 负责把页面更新成新的样子。你不再需要自己去找 DOM 节点、改文字、加删元素。

图 0-1　React 的心智模型：界面是状态的函数

为什么强调“新版本”

React 从 2013 年发布到现在，写法已经变过好几轮。网上大量教程、博客、Stack Overflow 答案还停留在旧写法上 —— 初学者最容易踩的坑，就是把不同年代的写法混在一起。下面这张时间线标出了 影响日常写法的几个关键版本：

图 0-2　React 版本时间线。本教程只使用函数组件和 Hooks，并用上 React 19 的新特性

🧩

函数组件 + Hooks

不再写类组件、不写 this、不写生命周期方法。状态用 useState，副作用用 useEffect。

🚀

createRoot

旧的 ReactDOM.render() 在 React 19 中已被移除，入口统一用 createRoot。

📝

Form Actions

<form action={fn}> 取代“onSubmit + preventDefault”，配合 useActionState 管理提交状态。

⚙️

React Compiler

编译器自动做记忆化，memo、useCallback、useMemo 不再需要到处手写。

贯穿全书的项目：Hacker Stories

和原书一样，我们不做零散的小例子，而是一路打磨同一个应用。它会从一个只显示 “Hello React” 的组件，长成一个能连接真实 API、带搜索历史和分页加载、有类型、有测试、部署上线的完整应用：

图 0-3　Hacker Stories 在各章中逐步成长

这套教程写给谁

学过一点 HTML / CSS / JavaScript，第一次接触 React的人。每个概念都从“为什么需要它”讲起。
看过老教程、被类组件和新写法搞混的人。每章的「新旧对照」会告诉你旧代码为什么那样写、现在为什么不这样写。
会用 Vue / Angular，想快速迁移的人。React 的核心概念不多，理解“单向数据流 + 重新渲染”后其余都是细节。

ⓘ 需要什么前置知识

会写变量、函数、数组和对象就够了。map / filter、箭头函数、解构、展开运算符、 Promise 和 async/await 这些“现代 JavaScript”，用到的时候都会顺手讲一遍。命令行只需要会 cd 和敲命令。

怎么用这套教程

按顺序读，边读边敲。第 1–25 章是一条直线，后面的章节都依赖前面写好的代码。第 26 章以后的几部分（样式、维护、实战、进阶专题）相互独立，可以挑着读。
被生态搞晕了？看第十部分。第 44–50 章专门讲怎么选库：状态管理、数据请求、UI 组件库、工具库、框架各有什么选择，以及怎么把它们组合进一个项目。
留意这些标记： React 19 表示新版本特性；旧写法表示你在老代码里会见到、但现在不推荐的写法；对照卡片左边是旧写法，右边是新写法。
每章末尾有「动手练习」和「面试题」。练习题动手做，面试题先自己回答再展开看答案。

旧写法 React ≤ 17

JSX

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

新写法 React 18+ / 19

JSX

import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(<App />);

全部章节

💡 一句话总结

如果你只记住一件事：React 组件就是一个函数，输入是 props 和 state，输出是界面描述（JSX）；数据只从上往下流，想往上通知就传一个回调函数下去。 剩下的 53 章，都是在展开这句话。

说明：本站是基于《The Road to React》（Robin Wieruch 著，roadtoreact.com）整理的中文学习笔记，按原书的项目顺序重新组织讲解并补充了图示与 React 19 的新旧对照。想获得完整原文、练习源码和后续更新，请支持原书。