模块 4.3

React 登场

前端开发的新规则

零到全栈 · 李勃老师 · 2026

回顾 · 上一节

构建工具，是个翻译官

开发者

舒服的写法

→翻译

浏览器

HTML / CSS / JS

顺着想一步

干脆，发明一套新规则？

老规则

手写 HTML / CSS / JS

新规则

更舒服的新写法

翻译，全甩给构建工具

这，就是「框架」

而且，早有许多人这么做了 →

React 还是 Vue？

第一

它俩，是同一类东西

React

管 UI 组件的规则

Vue

管 UI 组件的规则

上海话 · 粤语 —— 同一件事，腔调不同

第二

为什么挑 React

Vue

国内多 · 上手平缓

React

全球最流行 · 生态最大

生态 → 最后专门讲

选哪个，其实不要紧

概念通用 · 可迁移 —— 吃透了才带得走

框架是什么

框架，就是
管某一摊事的一套规则

React / Vue 管 "UI 组件" 这一摊

React 的核心

组件 —— 界面的一个"零件"

数据

结构

样式

行为

四样收进一个文件 · 像搭积木一样组合、嵌套

一个界面，就是一堆组件拼起来的

认个词

vanilla　＝　不用框架的原生写法

🍦 香草 = 冰淇淋的默认口味 → "原生、没加额外东西的版本"

⚠️ 别误会

浏览器，永远只认 HTML / CSS / JS

你写

React

→编译回

编译成

三件套

→

浏览器

认得

React 离不开构建工具

怎么放进项目

React 本质 = 几个 npm 包

npm install react react-dom

和 anime.js 一样，npm 装进来

再多想一层

Vite 凭什么翻译 React？

对你

更舒服的写法

对构建工具

附带一套"翻译规则"

规则 React 自带 · Vite 靠插件执行

配套代码

最终答案 · 别无脑抄

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

在自己项目上，一拍一拍搭到它

回头看 · 一条捷径

从 0 建 React，一条命令就够

这节课

从 vanilla 一拍拍改

为了学透

以后干活

npm create vite

骨架一次搭好

课程结尾 · 再想一层

我也能造一个新框架吗？

技术上，可以 —— 但会撞上一个真正的难关 →

难的，是「生态」

举个例子

日期选择器、表格、图表、富文本……

用 React / Vue

一行命令装进来

用你的新框架

全得从零造

框架的真正价值

站在全世界开发者的肩膀上

Ant Design

shadcn / ui

Material UI

生态 = 真正的护城河 · 现成的轮子，拿来就拼

下一节，把组件做扎实

内容与结构分开 · 让网站真正动起来

零到全栈 · 模块 4.3 完

React 登场

构建工具，是个翻译官

干脆，发明一套新规则？

它俩，是同一类东西

为什么挑 React

组件 —— 界面的一个"零件"

一个界面，就是一堆组件拼起来的

vanilla ＝ 不用框架的原生写法

浏览器，永远只认 HTML / CSS / JS

React 本质 = 几个 npm 包

Vite 凭什么翻译 React？

最终答案 · 别无脑抄

从 0 建 React，一条命令就够

日期选择器、表格、图表、富文本……

站在全世界开发者的肩膀上

vanilla　＝　不用框架的原生写法