在前端开发中，我们经常会用到 React ，而 React 中的 JSX 语法虽然易于理解，在处理浏览器兼容性和性能等问题时，往往会遇到困难。
Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码编译成符合旧版浏览器或老旧环境下所需的 JavaScript 代码。在 React 中，Babel 也可以将 JSX 代码转换成浏览器可以理解的 JavaScript 代码。
为什么需要 Babel
在早期版本的 JavaScript 中，编写大量的 HTML 代码往往是枯燥乏味的工作。然而，React 的出现极大地提高了前端开发的效率，因为它引入了 JSX 语法，使得在 JavaScript 中编写 HTML/模板的代码变得更加直观和简单。但是，由于 JSX 语法只是 React 的一部分，现代浏览器和 JavaScript 引擎并不支持它，因此需要使用 Babel 转换器将 JSX 代码转换成浏览器可以处理的标准 JavaScript 代码。
如何使用 Babel 转换 JSX
安装 Babel
首先，在项目的根目录下，安装 Babel 和相关的插件：
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react
配置 Babel
在根目录下创建名为 .babelrc 的文件，并在其中添加以下代码：
{
"presets": ["@babel/env", "@babel/preset-react"]
}这将使 Babel 使用预设来编译 JSX 代码。其中 @babel/preset-env 预设支持最新的 ES6+ 语法，而 @babel/preset-react 预设支持 JSX 语法。
配置 Webpack
在使用 Babel 转换 JSX 之前，我们需要使用 Webpack 进行配置。在 Webpack 配置文中，我们需要添加 babel-loader 属性，并将其配置为使用 .babelrc 文件。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- --------------
-
-
-
-
-这些配置告诉 Webpack 在运行时使用 babel-loader，并将其配置为使用 .babelrc 文件来转换 JSX 代码。
编写一个示例
现在，我们已经对 Babel 和 Webpack 进行了基本的配置。要确保 Babel 正确地转换 JSX 代码，我们可以使用以下示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- --- - -- -- -
------ -
---- ----------------------
--------- -----------
------- -- - ------ ------- -- --- ---------
------
-
-
------ ------- ---这段代码将创建一个 React 组件，其中包含一个 <div> 元素和两个子元素。我们使用了一个 className 属性来设置 CSS 类名，这在 JSX 中与 HTML 的 class 属性相同。
编译和运行示例
在完成了以上配置之后，我们可以使用 Webpack 将示例代码进行编译和构建：
npm run build
接下来，在浏览器中打开生成的页面，将会看到一个简单的界面，其中包含了通过 Babel 转换的 JSX 代码。
总结
在本文中，我们详细讲解了如何使用 Babel 转换 JSX 代码，包括安装 Babel、配置 Babel 和 Webpack 以及编写示例，并通过 npm run build 命令将代码编译成浏览器可以执行的 JavaScript 代码。
使用 Babel 和 Webpack 来转换 JSX 代码，可以确保在现代浏览器和旧版浏览器中都能够正确运行您的 React 应用程序。同时，由于 Babel 是一个非常普及的工具，因此学习和使用它将有助于您在其他 JavaScript 项目中提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1ee4ff6b2d6eab3d3c03d