JSX 与渲染

这一课你将能做到

1. 认出 JSX，并知道它最终还是 JavaScript
2. 正确使用 className、{} 插入表达式
3. 给列表每一项写上稳定的 key（并知道为什么）

为什么要学

React 组件要返回「界面长什么样」。
用 JSX 写起来像 HTML，但其实是 JS 语法扩展，构建工具会把它编译成函数调用。

人话：你在 JS 文件里写长得像标签的东西，方便描述界面；浏览器真正执行的仍是 JS。

常见卡点：把 JSX 当成「另一个 HTML 文件」，结果在里面写 class、忘记最外层只能有一个根、把整个对象丢进 {user}。本站卡片标题、进度数字，全是 JSX 里用 {} 插进去的。

先建立图像

const title = "题库";
const el = <h1 className="title">{title}</h1>;

人话拆开看：

• 外表像标签 <h1>...</h1>
• {title} 是插入 JS 表达式（这里是变量）
• className 对应 HTML 的 class（因为 class 在 JS 里是关键字，不能当属性名随便用）

编译后的直觉（不必手写）：大约变成 createElement("h1", { className: "title" }, title)。所以 JSX 不是魔法 HTML，是糖衣。

跟着做

步骤 1：根节点（最常见语法报错）

JSX return 时，最外层需要一个根，或用空标签 Fragment：

// 可以：隐形包裹，不增加多余 DOM
return (
  <>
    <h1>本站路径</h1>
    <p>前端主线</p>
  </>
);

// 也可以包一层真实 div
return (
  <div>
    <h1>本站路径</h1>
    <p>前端主线</p>
  </div>
);

相邻两个标签并排 return、外面不包，会语法报错。人话：函数一次只能「交回一件东西」；Fragment 就是那件隐形袋子。

步骤 2：表达式与「不能直接渲染对象」

const user = { name: "ada" };

export function Who() {
  // return <p>{user}</p>;  // 报错：对象不能当 React 孩子
  return <p>{user.name}</p>; // 正确：渲染字符串
}

规则记三条：

• {} 里放表达式（变量、三元、函数调用），不能直接放 if 语句
• 布尔值 true/false、null、undefined 通常什么都不显示
• 数字 0 要小心：条件渲染课会讲 {0 && <X />} 会把 0 画出来

步骤 3：列表与 key（本站课时列表就是这个）

const lessons = [
  { id: 1, title: "HTML" },
  { id: 2, title: "CSS" },
];

export function LessonTitles() {
  return (
    <ul>
      {lessons.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}