浏览器不能直接解析JSX，因其包含尖括号标签、className属性、{表达式}嵌入、自闭合语法等非标准JavaScript结构；Babel在编译阶段通过解析、转换（调用React.createElement）、生成三步将其转为合法JS代码。

Babel 不是直接“执行”JSX，而是把它当作一种特殊语法，在编译阶段就转成标准 JavaScript 函数调用——核心就是 React.createElement()。这个过程不依赖运行时，纯静态转换。

JSX 为什么不能被浏览器直接运行

浏览器只认识合法的 JavaScript 语法，而 JSX 包含大量非标准结构：

• 尖括号标签（如 <div>）在 JS 中会被解析为小于号和大于号，不是有效表达式
• className="box" 这类写法既不是对象字面量，也不是函数参数形式
• {count} 这种花括号嵌入，在 JS 中单独出现会报错（除非在模板字符串或对象里）
• <img /> 这种自闭合标签，JavaScript 完全没有对应语法规则

Babel 的三步转换流程

Babel 把 JSX 转成可执行代码，靠的是标准的编译三阶段：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 解析（Parse）：用 @babel/parser 把 JSX 字符串构建成抽象语法树（AST），识别出元素类型、属性、子节点等结构
• 转换（Transform）：启用 @babel/plugin-transform-react-jsx 插件，遍历 AST 中的 JSX 节点，逐个替换成 React.createElement() 调用
• 生成（Generate）：把修改后的 AST 输出为普通 JavaScript 字符串，保留缩进和可读性

转换规则的关键细节

不同 JSX 写法对应不同的 React.createElement 形式：

立即学习“Java免费学习笔记（深入）”；

• 原生标签（小写字母开头）→ 第一个参数是字符串：<div>Hi</div> → React.createElement("div", null, "Hi")
• 自定义组件（大写字母开头）→ 第一个参数是变量名：<Header /> → React.createElement(Header, null)
• 带属性和子元素：<input type="text" value={val} /> → React.createElement("input", { type: "text", value: val })
• Fragment：<><p>a</p></> → React.createElement(React.Fragment, null, React.createElement("p", null, "a"))

实际项目中怎么启用

要让 Babel 处理 JSX，得配对两样东西：

• 安装插件：npm install --save-dev @babel/plugin-transform-react-jsx
• 在 .babelrc 或 babel.config.json 中声明插件或使用预设：{"presets": ["@babel/preset-react"]}
• 如果没显式配置，Babel 默认会把 React.createElement 当作目标函数；也可通过 runtime 配置改用 jsx 运行时（如 import { jsx } from 'react'）