JSX 是 JavaScript 的语法扩展，不是 HTML，而是一种用于描述 UI 结构的声明式语法；它在编译时被转换为 React.createElement() 调用，最终生成 React 元素对象，由 React 渲染器解析并更新 DOM。
jsx 是 javascript 的语法扩展，不是 html，而是一种用于描述 ui 结构的声明式语法；它在编译时被转换为 `react.createelement()` 调用，最终生成 react 元素对象，由 react 渲染器解析并更新 dom。
JSX（JavaScript XML）本质上是 JavaScript 的语法糖，它允许开发者以类 HTML 的方式编写 UI 结构，但它不是 HTML，也不直接运行在浏览器中。浏览器无法识别 JSX，必须通过 Babel 等工具将其编译为标准的 JavaScript 函数调用——主要是 React.createElement()。
例如，这段看似 HTML 的 JSX：
const element = <h1 classname="title">Hello, JSX!</h1>;
会被编译为等价的 JavaScript：
const element = React.createElement(
'h1',
{ className: 'title' },
'Hello, JSX!'
);
该调用返回一个轻量级的普通 JavaScript 对象（即 React 元素），结构大致如下：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
{
type: 'h1',
props: {
className: 'title',
children: 'Hello, JSX!'
}
}
这个对象是不可变的、纯数据化的 UI 描述，React 以此为基础进行虚拟 DOM 对比、差异计算和高效 DOM 更新。
⚠️ 注意事项：
- JSX 是表达式，不是模板：可在 {} 中嵌入任意 JavaScript 表达式（如变量、函数调用、条件运算符），但不能使用 if 语句或 for 循环（需改用三元、逻辑与、map() 等）；
- 属性命名遵循 JavaScript 规范：如 className 代替 class，htmlFor 代替 for，tabIndex 代替 tabindex；
-
必须有且仅有一个根元素：若需包裹多个兄弟节点，须用 、
（简写 ）等作为容器； - 可不用 JSX，但不推荐：React 官方支持纯 JS 写法（如 React.createElement('div', {}, ...)），但 JSX 显著提升可读性与开发效率，已成为事实标准。
简言之，JSX 是连接开发者直觉（类 HTML 结构）与 React 底层机制（基于对象的 UI 描述）的关键桥梁——它既非字符串模板，也非真实 DOM，而是编译后驱动 React 渲染引擎的“UI 指令”。
