React 是什么

这一课你将能做到

1. 用自己的话对比「一手改 DOM」和「用 React 描述界面」
2. 说出组件、状态这两个词的人话意思
3. 知道本站为何用 React，以及官方文档入口

为什么要学

上一门 JS 课里，学习清单要自己：改数组 → 清空列表 → 再画一遍 DOM。
项目一大，这种手写同步很容易乱：你改了数据，忘了改某一块界面；或者界面改了，数据和它不再一致。

React 的核心想法：你只描述「数据现在长这样，界面应该长那样」；数据一变，React 帮你更新页面。

人话：React 是写用户界面的 JavaScript 库（本站 platform 就在用它，外面还包了 Next.js 这个框架）。
你不是在学「另一种 HTML」，而是学一种用数据驱动界面的写法。

本站真实场景：路径卡片、学/练/我切换、「留一句」离开页，都是一块块 React 组件。读完本课，你再打开 platform/src 里带 "use client" 的文件，会认出「这就是函数 + 返回标签」。

先建立图像

以前（命令式，你指挥浏览器一步步做）：
  找到按钮 → 改文字 → 再找到列表 → 删掉重建…

React（声明式，你描述「现在该长什么样」）：
  const [count, setCount] = …  // 数据（状态）
  return <button>{count}</button>  // 界面长什么样
  点按钮只改 count，界面跟着变

词	人话	别和这个混
组件（Component）	可复用的一块 UI，像自定义标签	不是 CSS class
状态（State）	组件记得的、会变的数据	不是「服务器数据库」
Props	父组件传给子组件的参数，子只读	不是 CSS 属性随便改

把页面想成乐高：每块积木是组件；积木上写的数字如果会变，那数字就是状态。

跟着做（先建立感觉，不要求本课就配置工程）

步骤 1：打开官方文档首页

打开 react.dev/learn，扫一眼 Quick Start。
权威材料以这里为准，比零散「2020 年前 class 组件」博客靠谱。本门课结构对照官方 Learn，正文用本站自己的例子。

步骤 2：对比两段「计数器」思路

原生 JS 思路（你已会）：

let count = 0;
btn.addEventListener("click", () => {
  count++;
  span.textContent = count; // 自己改 DOM
});

数据在 count，界面在 span，你必须自己把两边对齐。忘写 textContent 这一行，数字已经加了，屏幕还是旧的。

React 思路（预告，下一课起细写）：

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

你不需要现在就跑起来——先记住：点按钮只更新 count，按钮上显示的数字由 count 决定。 没有 ，没有 。界面是 的函数。