JSX 与渲染
React 不用模板，用 JSX——「在 JS 里直接写类 HTML」。它不是字符串，而是会被编译成 React.createElement(...) 函数调用，所以你在 JSX 里可以混写任意 JS 表达式（花括号 {} 内）：变量、三元、map、函数调用都行。
和 HTML 的差异点必须记牢：class 写成 className（class 是 JS 保留字）、style 要传对象且属性用驼峰（{ color: 'red', fontSize: 14 }）、单标签必须闭合（<img />）。条件渲染用 三元 或 &&，列表渲染用 map 并给每项 key。
渲染入口：createRoot(document.getElementById('root')).render(<App />)。React 的核心理念是 UI = f(state)——界面是状态的函数，状态变了整个函数重新执行，React 负责算出最小 DOM 更新。
本节要点JSX = JS 里写类 HTML，{} 内是表达式；class → className、style 传对象；条件用三元/&&，列表用 map + key。
代码
// JSX：在 JS 里直接写类 HTML（需构建工具编译）
function Welcome(props) {
// {} 里可以写任意 JS 表达式
return <h1>你好，{props.name}</h1>;
}
// JSX 编译后等价于：
// React.createElement('h1', null, '你好，', props.name)
// 条件渲染 + 列表渲染的标准套路
function TodoList({ todos, showDone }) {
return (
<ul>
{todos
.filter((t) => showDone || !t.done) // 条件过滤
.map((t) => (
<li key={t.id}>
{t.done ? '✅ ' : '⬜ '}
{t.text}
</li>
))}
</ul>
);
}
// 与 HTML 的差异：className、style 对象、单标签闭合
function Card() {
return (
<div className="card" style={{ padding: 12, borderRadius: 8 }}>
<img src="pic.jpg" alt="封面" />
</div>
);
}
