4.3 React,前端开发规则

课时概要

React 登场：它是架在 Vite 之上的一套前端开发新规则——把一块界面封装成「组件」，组件嵌套成页面，页面被 App 总管。从 vanilla 项目分四拍逐步改造成 React 项目，理解组件/props/JSX、HTML 为什么退化成挂载点，以及框架真正的价值是生态。

以上为 UP 主的 B 站官方简介，非观看笔记；只有跟完这一节才算自己的理解。

视频：【零到全栈】4.3-React,前端开发规则｜时长 56:00 ｜模块 4 · 现代前端

讲义：模块 4.3：React——前端开发新规则（李勃老师.com）

配套 demo：

bash

git clone https://github.com/joylibo/zero-to-tech-demos.git
cd zero-to-tech-demos/zero-to-tech-4-3

本节要点

React 是架在构建工具之上的新规则：浏览器只认 HTML/CSS/JS，React 的 JSX/组件由 Vite 翻译回去——这就是为什么先讲 Vite 再讲 React。
核心是组件：一个组件把「数据 + 结构 + 样式 + 行为」封装成一个能独立拎走的 UI 单元；小组件拼大组件，大组件拼页面。
组件名大写开头、HTML 标签小写——构建工具靠首字母大小写区分「你自己的组件」和「原生标签」。
组件挂到 HTML 要 createRoot（进入 React 世界的门，整个项目只做一次）；组件套组件直接写标签（还在 React 世界内部）。
props = 给组件传参数：同一个 PageHeading，传不同 title 就显示不同内容——这就是复用。
改造完成后 HTML 从「页面主体」退化成一个 <div id="root"> 空壳，真正内容由 React 画。
拆组件不是越细越好：只在「能复用」或「让代码更好读」时才拆。
框架真正难的不是语法，是生态——现成组件库（Ant Design / shadcn/ui 等）和踩过坑的人。

笔记正文（讲义整理）

为什么选 React

React 和 Vue 是同一类东西（不同方言），选 React 是因为全球生态最大：npm 下载量、组件库、教程、AI 语料都最厚。对你这种用 AI 组合现成生态的学习者，这一点比「谁语法漂亮」重要得多；「组件」「状态」「数据驱动」这些概念在两者间通用。

组件 = 一个 UI 单元

以前按文件类型分（HTML 结构 / CSS 样式 / JS 行为）；React 按界面单元分——一张卡片相关的数据、结构、className、行为，都收在这个组件周围。看 ResultCard.jsx：

jsx

export default function ResultCard() {
  const cardRef = useRef(null);
  useEffect(() => { animate(...); }, []);   // 行为：入场动画
  return (
    <article className="panel result-panel card">
      {/* 结构 + 数据：原文/拼音/情感分数/判断 */}
    </article>
  );
}

import 要什么引什么，export default 交出去，function 组件名() 定义组件，return (...) 是 JSX（长得像 HTML），className 代替 class。

四拍改造

先接管一角：只把结果区卡片做成 ResultCard.jsx，页面其他部分保持 vanilla——React 可以只接管页面一个角落。
整页交给 React：拆成 Nav / PageHeading / InputCard / ResultCard / AnimatedCardGrid，再用 TextLabPage 拼成整页；HTML body 清空成 <div id="root">。
个人主页也抽组件：HomePage 复用同一套 Nav/PageHeading，靠 props 传不同标题——改一处两处生效。
App 总管 + 全新空壳：删掉旧两个 html 和 vanilla js/css，新建 src/main.jsx 把 App 挂进 <div id="root">；新 index.html 只剩空壳和一行 script。

最终骨架：

index.html（空壳）
└─ src/main.jsx（入口）
   └─ App.jsx（总管，决定显示哪一页）
      ├─ HomePage
      │  ├─ Nav
      │  └─ PageHeading
      └─ TextLabPage
         ├─ Nav · PageHeading · InputCard
         ├─ ResultCard
         └─ AnimatedCardGrid

两个关键规则

大写 vs 小写：<Nav /> 是组件，<article> 是原生标签——React 靠首字母大小写翻译。
props 传参：<PageHeading title="文字实验室" subtitle="..." />，同一个组件喂不同参数就显示不同内容，这是复用的基础。

真正从 0 起新项目不用这么麻烦：npm create vite 选 React 即可，Vite 直接生成同款骨架。我们手动走一遍是为了理解。

和 GFG / 课程笔记的连接

组件化的直觉，Python 里你早就建立过：

React	Python（GFG 笔记）
一个组件封装数据+结构+行为	一个 class 把属性+方法封装在一起
`function ResultCard()` 返回界面	一个函数返回要渲染的东西
props = 给组件传参	函数参数
App 总管决定显示哪页	主程序 `if/elif` 选择执行哪个分支
生态：Ant Design / shadcn/ui	PyPI 上的 requests / pandas ——装进来直接用
vanilla（无框架原生写法）	不用任何第三方库，纯标准库写

你在 GFG 里 import requests 然后组合调用，和 React 里 import ResultCard 再 <ResultCard /> 是同一个动作：拿别人写好的零件，拼成自己的东西。

关键概念

React：架在构建工具上的前端框架，提供组件化规则。
组件（component）：把数据/结构/样式/行为封装成可复用 UI 单元的函数。
JSX：React 里长得像 HTML 的返回写法，class 要写 className。
props：给组件传的参数。
createRoot：进入 React 世界的门，把组件挂到真实 DOM。
vanilla：不依赖框架的原生 HTML/CSS/JS 写法。
生态：框架背后现成组件库、第三方工具、教程和踩坑经验。

代码 / 实操