什么是 JSX？
JSX 是 JavaScript 的一种语法扩展，它允许在 JavaScript 中编写类似于 HTML 的代码。它是 React.js 框架中用于构建用户界面的一种语法。
例如，下面是一个简单的 JSX 代码片段：
----- ------- - ---------- ------------
在这个代码片段中，<h1> 元素看起来像 HTML，但实际上它是一个 React 元素。
为什么需要将 JSX 转换为 JavaScript？
虽然 JSX 看起来像 HTML，但它不是标准的 JavaScript 语法。因此，浏览器无法直接理解和执行 JSX 代码。为了在浏览器中使用 JSX，我们需要将它转换为普通的 JavaScript 代码。
使用 Babel 进行 JSX 转换
Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为兼容性更好的 JavaScript 代码。它也可以将 JSX 代码转换为普通的 JavaScript 代码。
要使用 Babel 进行 JSX 转换，我们需要安装 @babel/preset-react，它是 Babel 的一个预设，用于处理 JSX 代码。
首先，我们需要安装 Babel 和 @babel/preset-react：
--- ------- ---------- ----------- -------------------
然后，在项目的根目录下创建一个名为 .babelrc 的文件，并添加以下内容：
- ---------- ----------------------- -
现在，我们已经设置好了 Babel 的配置，可以开始将 JSX 代码转换为 JavaScript 代码了。
示例代码
下面是一个使用 JSX 编写的 React 组件：
------ ----- ---- -------- -------- --------------- - ------ ---------- ------------------- - ------ ------- ---------
要将这个组件转换为普通的 JavaScript 代码，我们可以使用 Babel：
------ ----- ---- -------- -------- --------------- - ------ ------------------------- ----- ------- ----------------- - ------ ------- ---------
可以看到，Babel 将 JSX 代码转换为了普通的 JavaScript 代码。
总结
使用 Babel 将 JSX 转换为 JavaScript 是 React.js 开发中必不可少的一步。通过将 JSX 代码转换为普通的 JavaScript 代码，我们可以在浏览器中使用 React 组件，同时还能享受到 Babel 带来的兼容性和语言特性的好处。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f3d8e02b3ccec22fc451c2