第二章：JSX 与元素树

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

本章目标

本章掌握 JSX 的基本写法：用花括号做表达式插值，用 className 设置 CSS 类，用 Fragment shorthand <>... 返回相邻节点。

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

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

概念模型

JSX 不是字符串模板，它会被编译成 React element 描述对象。React element 是不可变的 UI 描述，React 再根据这些描述更新真实 DOM。

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

最小示例

JSX 让 UI 结构靠近数据表达式。普通 HTML 属性名在 JSX 中会使用 JavaScript 风格，例如 className。

type Lesson = { title: string; minutes: number };

export function LessonHeader({ lesson }: { lesson: Lesson }) {
  return (
    <>
      <h1 className="title">{lesson.title}</h1>
      <p>预计学习 {lesson.minutes + 10} 分钟</p>
    </>
  );
}

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

规则与陷阱

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

JSX 花括号中只能写表达式，不能直接写 if 语句。
返回多个兄弟节点时使用 Fragment，避免增加无意义 DOM。
class 要写成 className，for 要写成 htmlFor。
React element 本身不是 DOM 节点，不要试图直接修改它。

练习

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

写一个组件展示课程名、难度和是否完成。
用 Fragment 包裹两个相邻段落。
故意把 className 写成 class，观察 TypeScript 或控制台提示。