你可能会说
这个页面组件太多了，帮我用 React 拆分一下，每个组件管自己的状态。
React 是 Meta 开发的 UI 库，用「组件」思维构建界面——每个组件是独立、可复用的 UI 积木块。
Meta 开发的前端框架，用「组件」拼装页面。数据变了，界面自动更新，不用手动操作 DOM。
生活类比
像乐高积木——每个组件是一块积木，拼在一起就是完整页面。改一块，整体自动调整。
🎮 动手试试
👇 体验 React 的 useState 状态管理：点击切换完成，输入添加新项
React 中，父组件向子组件传递数据使用什么机制？
你可以这样告诉 AI
帮我用 React 写一个 TodoList 组件：有输入框、添加按钮、列表项可勾选完成、可删除，用 useState 管理状态。
React 用 JSX + 单向数据流，Vue 用模板 + 双向绑定。理念不同但都能构建现代 UI。
React 是 UI 库（只管视图），Next.js 是基于 React 的全栈框架（加了路由、SSR、API）。
复杂交互界面
状态多、组件间通信频繁的应用（后台管理、社交应用）
组件复用
同一 UI 元素在多处出现（按钮、卡片、表单）
简单静态页面
只有展示没有交互的页面，用纯 HTML 或 Astro 更轻量
极小项目
一两个页面的小项目，引入 React 反而增加复杂度
UI 的基本单元，一个函数返回 JSX 就是一个组件
父组件传给子组件的参数，只读不可修改
组件内部的可变数据，用 useState 管理，改变会触发重新渲染
在 JS 中写类 HTML 的语法，最终编译为 JS 函数调用
全栈 React 框架，支持 SSR/SSG、文件路由、API Routes
用 React 语法写原生移动 App（iOS/Android）
强调 Web 标准的全栈 React 框架，表单和数据加载更优雅