面试官：JSX 是怎么运行的？答不出 Babel 编译流程就输了！你可能每天都在写 React，写着各种各样的 JSX：

你可能每天都在写 React，写着各种各样的 JSX：

const element = <h1>Hello, world</h1>;

看起来就像 HTML，一切都很自然。但你有没有想过——浏览器根本不认识这种语法。那它是怎么运行的？为什么我们写的这段代码不会报错，还能正常渲染出内容？

答案两个字：Babel。

这篇文章就带你把 Babel 的编译流程从头到尾梳理一遍，尤其适合准备面试或者想深入理解 React 背后的“魔法”的你。

JSX 到底是什么？

JSX（JavaScript XML）是 React 推出的一种语法扩展，它看起来很像 HTML，但实际上是 JavaScript 的语法糖。

比如我们平时这么写：

const list = (
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
);

浏览器是认不出这段代码的。它只懂标准 JavaScript。所以我们写的 JSX，必须得被“翻译”成普通的 JS 才能运行。那谁来翻译？就是 Babel。

Babel 是干嘛的？

简单说，Babel 是一个 JavaScript 编译器，它的核心作用就是把 新语法 → 老语法，让老旧浏览器也能理解你写的代码。

它能干的事情包括：

新语法	Babel 转换后
`let`	`var`
`() => {}`	`function() {}`
`async/await`	Promise 回调
JSX	`React.createElement(...)`

也就是说，我们日常写的那些 “高级语法”，其实运行前都已经被 Babel 转了一遍。

真相来了：JSX 是怎么被转换的？

比如你写了：

const element = (
  <ul>
    <li key="q1">1</li>
    <li key="a2">2</li>
    <li key="z3">3</li>
  </ul>
);

Babel 会把它编译成：

const element = React.createElement(
  "ul",
  null,
  React.createElement("li", { key: "q1" }, "1"),
  React.createElement("li", { key: "a2" }, "2"),
  React.createElement("li", { key: "z3" }, "3")
);

是不是瞬间就理解了：原来 JSX 其实就是 React.createElement() 的语法糖！

所以你并不是在写 HTML，而是在写函数调用。

Babel 怎么用？手动编译一次看看！

虽然现在 Vite/Webpack 这些工具都帮我们封装好了 Babel，但了解 Babel 真正怎么工作的，能让你彻底吃透 React 的底层逻辑。

第一步：安装 Babel 依赖

我们用 pnpm 举个例子（当然用 npm/yarn 也一样）：

pnpm add @babel/core @babel/cli -D

含义：

@babel/core 是核心模块
@babel/cli 提供命令行工具
-D 表示这是开发依赖，生产环境不需要它

第二步：配置 `.babelrc`

在项目根目录新建一个 .babelrc 文件，内容如下：

{
  "presets": ["@babel/preset-react"]
}

这个 preset 的作用是告诉 Babel：我要转 JSX！

如果你还想转 ES6+ 语法，也可以加上 "@babel/preset-env"。

第三步：编译一个 JSX 文件

比如你有一个 demo.jsx 文件，内容是：

const element = <h1>Hello Babel!</h1>;

执行：

npx babel demo.jsx --out-file output.js

Babel 就会输出一个 output.js，里面是标准 JS：

const element = React.createElement("h1", null, "Hello Babel!");

是不是瞬间理解 JSX 的“幻术”了？

那 Vite 里是怎么处理 JSX 的？

虽然 Vite 用的是 esbuild（速度更快），但它背后处理 JSX 的原理和 Babel 是一样的：

你写下 JSX
esbuild/Babel 插件识别出来
自动转成 React.createElement
浏览器运行的是标准 JavaScript

你之所以没感受到，是因为这些转换都被工具链默默做掉了。

面试问到怎么办？

如果你在面试中被问到「JSX 是怎么被运行的」，你可以这样答：

JSX 不能直接在浏览器中运行，会被 Babel 或 esbuild 编译成 React.createElement(...) 形式，最终返回 React 元素对象。这一步在项目构建阶段由工具链完成，比如 Vite、Webpack 等。

面试官十有八九会点头！

小结一下

JSX 是 React 的语法糖，不是 HTML，也不是原生 JS
Babel 把 JSX 编译成 React.createElement(...) 的形式
我们可以手动配置 Babel 来更直观地理解转换过程
工程项目中这一切都由 Vite/Webpack 自动完成
懂了这些，面试官就没那么容易问倒你了

如果你看到这里，恭喜你，已经超越 80% 的 React 初学者了！

觉得有收获的话，欢迎点个赞、收藏支持一下 🙌
如果还有别的 React 或 Babel 的问题，也可以留言讨论！

面试官：JSX 是怎么运行的？答不出 Babel 编译流程就输了！