1. React 是什么

这是什么：React = 一个声明式 UI 库，改数据视图就自动更新，页面由一个个组件拼起来。

为什么用：上一章你刚用 Vue 体验过「只管改数据」，同一套思想换个框架再实现一遍，能看清哪些是框架的皮、哪些是原理的骨。

如何用：本章和 Vue 一样从免构建开始——三个公开 CDN 脚本就能在浏览器里直接跑 React，先看一个最小的换人组件，再把两套概念对照着看。

1.1 最小的 React 组件（免构建，浏览器打开即跑）

React 学习阶段全程用公开 CDN 的免构建写法：不需要 Node、不需要 npm，一个 .html 文件 + 三行 CDN 引入就能跑。三个脚本各干一件事：

react.production.min.js——React 本体，负责「算出」界面
react-dom.production.min.js——把算好的界面画进页面
babel.min.js——把 JSX 现场编译成浏览器认识的 JS（type='text/babel' 的代码块归它管）

直接贴进右侧「在线运行场」点运行，或存成 hello.html 双击打开：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <script src='https://registry.npmmirror.com/react/18.3.1/files/umd/react.production.min.js'></script>
  <script src='https://registry.npmmirror.com/react-dom/18.3.1/files/umd/react-dom.production.min.js'></script>
  <script src='https://registry.npmmirror.com/@babel/standalone/7.29.11/files/babel.min.js'></script>
</head>
<body>
  <div id='root'></div>

  <script type='text/babel' data-presets='react'>
    function App() {
      const [name, setName] = React.useState('青蛙')   // 无 import：钩子从全局 React 上取
      return (
        <div>
          <h1>你好，{name}</h1>
          <button onClick={() => setName('熊猫')}>换人</button>
        </div>
      )
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />)
  </script>
</body>
</html>

你会看到：页面显示「你好，青蛙」，点「换人」瞬间变「你好，熊猫」——和 Vue 版行为一样，注意两处姿势差别：钩子从全局 React 上解构取，启动用 ReactDOM.createRoot。

对照 Vue 版你会发现：

概念	Vue	React
页面	template	JSX（JS 里的 html）
响应式	ref/reactive + 自动追踪	useState + 手动触发的 immutability
事件	@click	onClick
组件	.vue 三段式	函数组件（JSX 随手写）

1.2 React 的三个世界观

UI = f(state)：界面是状态（数据）的函数。数据一变，整个函数重新执行，返回新 UI——极简又彻底
一切皆 JavaScript：模板不做 markup 也可以是 JS 表达式（map 生成列表、三元写条件）
单向数据流：数据从父向下传（props），子组件向上「汇报」（回调函数）

1.3 为什么还要学

工作市场占用第一（国内外均高）
学习后「组件／数据流」观念横向迁移到任何框架
本教程你已用三视图做过同一问题，加深理解

1.4 动手改

对着 1.1 的代码先思考三个问题（不用敲代码）：

React.useState('青蛙') 里存的「青蛙」哪来的？
onClick 和 jQuery 的 .click(fn) 差什么？
Vue 用 {{ name }}，React 怎么表达同样意思？（答案：{name}）

1.5 小结

React 与 Vue 同源（数据驱动），姿势不同（JSX + Hooks）
免构建三件套：React 本体 + ReactDOM 入口 + Babel 编译 JSX，type='text/babel' 块内随手写
UI = f(state)——状态重新计算一切

下一章：环境搭建与 JSX 🐸