React 从零到壹

1. 为什么选 React？

生态圈：大厂背书 + 社区活跃，UI 库、状态管理、路由、构建工具都有一套成熟配套。
渐进式：可以从 10 行代码开始，也能扩展到上千万行的大型应用。
就业友好：打开国内任意招聘 App，前端 JD 里“熟练 React”出现的频率和 Vue 五五开。

一句话：想学现（找）代（工）前（作）端，React 基本跳不过去。

2. 三分钟快速认识 React 核心概念

概念	类比	一句话解释
JSX	HTML + JavaScript 的混合体	写 `<button>` 的时候直接塞个 `{isLogin ? 'Log out' : 'Log in'}`
组件	乐高积木	界面拆成小积木，再拼接成大应用
Props	外部参数	爸爸传给儿子的玩具
State	内部记忆	儿子偷偷攒的私房钱
Hook	魔法咒语	用 `useXxx()` 让函数组件瞬间拥有“类组件超能力”

React 的精髓：UI = f(state)，界面只是状态的函数，其余都是细节。

3. 手搭第一个 React 项目

方案 A：Vite（2024 推荐，启动 < 1 秒）

npm create vite@latest hello-react -- --template react
cd hello-react
npm install
npm run dev

方案 B：Create React App（CRA，官方模板，生态稳定）

npx create-react-app hello-react-cra
cd hello-react-cra
npm start

浏览器访问 http://localhost:5173（Vite）或 http://localhost:3000（CRA）。

4. 写一段真正可交互的计数器

删掉 App.jsx 或 App.js 官方示例，整段替换下面代码。

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

export default App;

Ctrl+S 保存，浏览器立刻热更新。这就是 JSX + State 在 10 行代码内的威力。

5. 组件拆分 + Props / State 快速上手

把计数器拆成两个小玩具。

// Counter.jsx
export default function Counter({ initial = 0 }) {
  const [count, setCount] = useState(initial);
  return (
    <div>
      <p>当前值：{count}</p>
      <button onClick={() => setCount(count + 1)}>加</button>
      <button onClick={() => setCount(count - 1)}>减</button>
    </div>
  );
}

在 App.jsx 使用它：

<Counter initial={5} />
<Counter initial={10} />

口诀

Props 向下传递数据：父传子用 Props，只读。
State 局部管理：子组件维护自己的 count，不影响其它兄弟。

6. 必会：Hooks —— 用函数写组件

从 React 18 开始，官方全面拥抱 函数组件 + Hooks。最常用的“三大钩子”如下：

钩子	用途
useState	让函数组件拥有内部状态
useEffect	副作用（发请求、订阅、操作 DOM）
useContext	跨组件共享状态，告别“Props 地狱”

小例子：首次挂载时请求数据。

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(setUsers);
  }, []); // 空数组 ⇒ 只执行一次

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

注意：空依赖数组意味着“依赖永远不会变”，等价于 componentDidMount。

7. 调试与热更新

React DevTools：Chrome 扩展 + VS Code 插件，可视化检查组件树、Props、State。
ESLint + Prettier：一行命令自动格式化，减少低级错误。
```
npm install -D eslint-plugin-react prettier
npx eslint --init
```
Fast Refresh：改一行自动刷新组件，不丢 State。Vite 和 CRA 默认开启。

8. 下一步学什么？

把学习路线画成一条“打怪升级”路线：

基础语法（已完成）
路由：react-router-dom 6.x
全局状态：Context + useReducer，或者 Redux Toolkit / Zustand / Jotai / Recoil
UI 库：Ant Design / Material-UI / Chakra UI
构建优化：拆分代码、Bundle 分析、SSR、Next.js
测试：React Testing Library + Jest
React 18 新特性：Concurrent Features、Suspense、Server Components

彩蛋：一行命令部署到线上

npm run build   # 构建生产包
npx gh-pages -d dist # 推到 GitHub Pages

恭喜你，入门结束！接下来就去折腾路由、全局状态、CSS-in-JS、性能优化吧。
有问题在评论区留言，我们一起踩坑。