JSX 语法上像 HTML，本质是 React.createElement(component, props, ...children) 的语法糖：
编译成 React.createElement('div', {id:'hi'})。标签小写是 HTML 原生标签、大写首字母是自定义组件——这个约定让编译器一眼区分。与 HTML 的关键差异：class → className（保留字冲突）、style 接收对象（style={{color:'#fff'}}）、属性一律驼峰（onClick、tabIndex）、布尔属性要显式传值、注释要包在 {} 里。JSX 是表达式：可以出现在任何可以放值的地方，可赋值、可作参数、可放数组 map 渲染列表。
function App() {
const name = 'Tom', isVip = true;
return (
<div className="card" onClick={() => alert(name)}>
{/* 注释要包在 {} 里 */}
<h1 style={{ color: '#4a9eff', fontSize: 18 }}>你好 {name}</h1>
<p>{isVip && 'VIP 用户'}</p> {/* 条件渲染 */}
<img src="a.png" alt="" /> {/* 单标签必须闭合 */}
</div>
);
}
// 编译后的真身（babel 可还原）：
// React.createElement('div', { className: 'card', onClick: ... },
// React.createElement('h1', { style: {...} }, '你好 ', name),
// React.createElement('p', null, isVip && 'VIP 用户'))