第一章：环境搭建与第一个 React 程序

本章属于 React 教程的核心路线。建议先通读概念模型，再手写最小示例，最后用练习验证自己能否独立复现。

本章目标

本章完成开发环境搭建，使用 npm create vite@latest react-textbook -- --template react-ts 创建项目，并认识 Node.js、Vite、TypeScript、src/main.tsx 与 App.tsx 的关系。

阅读本章时，请把每个 API 放回“数据如何变成界面、用户操作如何改变数据”的主线中理解。React 的学习重点不是背诵语法，而是建立可预测的渲染模型。

识别本章概念在真实组件中的位置
能写出一个最小可运行示例
能解释常见错误为什么发生

概念模型

Vite 负责开发服务器、模块转换和打包；TypeScript 负责在运行前检查类型；React 通过 createRoot(document.getElementById("root")!) 把组件树挂载到 HTML 容器中。

你可以把 React 程序看成一棵由组件组成的元素树。每次输入数据、状态或外部系统发生变化，React 会重新计算需要展示的 React element，再用高效的方式更新浏览器中的 DOM。

最小示例

第一个 React 程序通常只有一个根组件 App.tsx 和一个渲染入口。入口文件不负责业务 UI，它只负责把根组件交给 React。

import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

createRoot(document.getElementById("root")!).render(<App />);

type LessonNote = { title: string; done: boolean };\nconst note: LessonNote = { title: 'React 教程', done: false };

规则与陷阱

规则的价值在于让多人维护同一个项目时仍能预测行为。下面这些限制看似细碎，实际都在保护组件的输入、输出和生命周期边界。

不要把业务逻辑写进 main.tsx，入口应保持稳定。
Vite dev server 的热更新不是生产构建，发布前仍要运行 build。
TypeScript 的报错应优先修复，不要用 any 掩盖数据结构问题。
App.tsx 可以很小，但它应清楚表达应用的第一层布局。

练习

练习应当先小后大：先验证一个概念，再把它接入完整页面。不要在没有理解失败原因时复制更复杂的代码。

运行 npm create vite@latest react-textbook -- --template react-ts 并启动开发服务器。
修改 App.tsx，让页面显示课程标题和当前章节。
查看 index.html、src/main.tsx、App.tsx，画出渲染入口链路。