React 教程

本教程是 React 的完整 12 篇入门系列,面向已经掌握 JavaScript 基础的学习者。从环境搭建、JSX 语法一路讲到 Hooks、Context、表单与路由,每一篇都配有可运行的代码示例。

React 是 Facebook(现 Meta)在 2013 年开源的前端库,它开创的组件化 + 声明式渲染范式深刻影响了之后所有前端框架的设计——Vue、Angular、Solid 都能看到它的影子。2019 年推出的 Hooks 让函数组件一统天下,这也是今天我们学习 React 的主入口。

先看一个 React 组件

下面是一个最简单的计数器组件,先感受一下 React 代码的样子:

import { useState } from "react";

// 一个 React 组件:就是一个返回 JSX 的函数
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数:{count}
    </button>
  );
}

export default Counter;

全部 12 篇子教程

建议按顺序学习,每天 1~2 篇,一到两周即可入门。每篇都配有可运行的示例,边读边敲效果最好。

React 简介 — 历史、理念与应用场景
React 环境搭建 — Vite 创建项目、目录结构、npm 脚本
JSX 语法 — 在 JS 里写 HTML、表达式嵌入、条件渲染
React 函数组件 — 组件即函数、组合与抽取
Props 属性 — 父子数据流、解构、默认值、children
State 与 useState — 状态管理、不可变更新、函数式更新
React 事件处理 — 合成事件、绑定方式、表单事件
列表渲染与 key — map 渲染、key 的选择与陷阱
Context 跨层传递 — 解决 props 透传、useContext
受控组件与表单 — input、textarea、select、表单提交
React Router 路由 — Routes、Route、Link、动态参数
生命周期与 useEffect — 挂载、更新、卸载、副作用清理

前置知识

本系列假设你已经掌握:

HTML / CSS 基础:能写一个简单网页,知道标签、样式怎么写。
JavaScript ES6+:尤其是箭头函数、解构、展开运算符、模板字符串、Promise、模块。不熟的话先看我们的 JavaScript 教程。
命令行 / npm 基础:会装 Node.js、会用 npm 装包。

开始学习

准备好了吗?从第一篇开始 → React 简介

✈️💬

React 教程

先看一个 React 组件

全部 12 篇子教程

推荐学习路径

前置知识

开始学习