什么是 React
React 是 Facebook（现 Meta）开源的声明式 UI 库：你用类似 HTML 的语法描述“界面长什么样”，数据变了界面自动更新，不用手动操作 DOM。它只解决“视图渲染”这一件事，路由、状态管理、构建工具都交给生态。
React 的三块基石：组件（把界面拆成独立可复用的函数）、JSX（在 JS 里写类似 HTML 的标签语法）、虚拟 DOM（内存里描摹界面，算出最小改动再更新真实 DOM）。与 Vue 相比，React 更“底层”：同样的能力往往需要你组合更多概念，但也因此更加灵活。
- 声明式：描述结果而非过程，数据驱动视图自动更新
- 组件化：界面 = 一棵组件树，组件是返回界面的函数
- 生态自选：路由用 React Router，状态用 Context/Redux/Zustand
HTML
<!-- 最小可运行的 React 页面：三个 CDN + 一个根节点 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React 演示</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // 组件：返回界面的函数；useState 让函数组件拥有自己的数据 const { useState } = React; function Counter() { const [count, setCount] = useState(0); // 声明状态，初始 0 return ( <div style={{ textAlign: 'center', padding: 24 }}> <h1>计数器：{count}</h1> <button onClick={() => setCount(count + 1)}>+1</button> </div> ); } // 把组件挂载到 #root const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Counter />); </script> </body> </html>
本节要点React = 声明式 + 组件化 + 虚拟 DOM；它只管视图，其余能力来自生态，学习曲线前陡后缓。
