当您编写 React 时，您会经常看到 JSX – 一种在 JavaScript 代码中看起来像 HTML 的语法。但你有没有想过这段代码在浏览器中是如何运行的？

神奇之处在于：JSX 不是有效的 JavaScript！浏览器无法直接理解它。在幕后，像 Babel 这样的工具介入将 JSX 转换（或“转译”）为常规 JavaScript。

流程：

1.你编写 JSX – 它看起来像 HTML，但存在于你的 React 组件中。例如：

const element = 
Hello, World!
;

2.Babel 对其进行转换 – 在构建过程中，Babel 使用 React.createElement:
将 JSX 转换为纯 JavaScript

const element = React.createElement('h1', null, 'Hello, World!');

3.浏览器中的 JavaScript – 最后，这个标准 JavaScript 是浏览器执行的，动态构建 DOM。

巴别塔是如何工作的？

Babel 是一个强大的 JavaScript 编译器，使您能够使用最新的 JavaScript 功能（包括 React 中的 JSX），同时确保不同浏览器和环境之间的兼容性。以下是 Babel 工作原理的详细说明：
1.解析
Babel 首先将现代 JavaScript 或 JSX 代码解析为 抽象语法树 (AST)。 AST 是一种详细的树状结构，以 Babel（和其他工具）易于使用的方式表示代码来分析和操纵。在此步骤中，Babel 读取代码但尚未更改它。
例如，Babel 采用以下 JSX 代码：

const element = 
Hello, World!
;

并生成一个AST，代表这段代码的结构。
2.转变
接下来，Babel 将一系列 插件 应用于 AST。每个插件负责根据它定义的 rules 转换 AST 的特定部分。这些转换可以包括将现代 JavaScript 语法（如箭头函数或 async/await）转换为旧的、浏览器兼容的版本。
对于 JSX，Babel 转换：

const element = 
Hello, World!
;

const element = React.createElement('h1', null, 'Hello, World!');

3。 代码生成
一旦所有转换完成，Babel 就会从转换后的 AST 生成 JavaScript 代码。这是生成人类可读输出的最后一步，浏览器或 Node.js 可以执行该输出。

我们得出结论...

为什么它很重要：

JSX 允许您编写更直观、基于组件的 UI 代码，但 Babel 和 JavaScript 运行时让它变得栩栩如生。了解这种转换可以帮助您更好地排除故障并编写更优化的 React 应用程序。