React JSX — JavaScript 中的 HTML
JSX 语法：表达式嵌入、条件渲染、列表渲染、样式 · 难度：入门 · +20XP
JSX — 在 JavaScript 里写 HTML
JSX 是 React 的核心语法，让你在 JS 中直接写类似 HTML 的代码。它本质是 React.createElement() 的语法糖。
JSX 规则
| 规则 | 示例 |
|---|---|
表达式用 { } | {name}、{1 + 1}、{user.age} |
| 属性用 camelCase | className 非 class，htmlFor 非 for |
| 自闭合标签 | <img />、<br />、<input /> |
| 单个根元素 | 返回单个标签或用 <>...</>（Fragment）包裹 |
条件渲染
{isLoggedIn ? <Dashboard /> : <Login />}
{isAdmin && <AdminPanel />}列表渲染
{users.map(user => (
<li key={user.id}>{user.name} - {user.age}岁</li>
))}
// ⚠️ 必须加 key！用唯一 ID，别用 index样式
// 内联样式（对象，camelCase）
<div style={{ color: "red", fontSize: 16 }}>
// CSS 类名
<div className="container">