在 React 项目中，我们通常使用 JSX 来编写组件。但是，JSX 并不是标准的 JavaScript 语法，因此在浏览器或者 Node.js 中直接运行会报错。为了解决这个问题，我们需要将 JSX 转换为普通的 JavaScript 代码。这时候，Babel 就派上用场了。
什么是 Babel？
Babel 是一个 JavaScript 编译器，可以将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。它支持最新的 JavaScript 语法和一些实验性的功能，例如 JSX、ES7 async/await 等。
Babel 可以作为一个独立的工具使用，也可以和其他构建工具（如 webpack、gulp）一起使用。在 React 项目中，我们通常使用 Babel 将 JSX 转换为普通的 JavaScript 代码。
安装 Babel
使用 Babel 需要先安装它的一些插件。在 React 项目中，我们需要安装以下几个插件：
@babel/core：Babel 的核心模块，提供了编译器的基本功能。@babel/preset-env：根据当前环境自动确定需要转换的 JavaScript 特性。@babel/preset-react：将 JSX 转换为普通的 JavaScript 代码。
可以使用以下命令安装这些插件：
--- ------- ---------- ----------- ----------------- -------------------
配置 Babel
安装完插件之后，我们需要在项目根目录下创建一个 .babelrc 文件，用来配置 Babel。在 .babelrc 文件中，我们可以指定需要使用哪些插件、哪些 JavaScript 特性需要转换等。
以下是一个简单的 .babelrc 文件配置：
-
---------- -
--------------------
---------------------
-
-这个配置文件使用了 @babel/preset-env 和 @babel/preset-react 两个插件。其中，@babel/preset-env 插件会根据当前环境自动确定需要转换的 JavaScript 特性，而 @babel/preset-react 插件会将 JSX 转换为普通的 JavaScript 代码。
使用 Babel
完成配置之后，我们就可以使用 Babel 来编译我们的代码了。可以使用以下命令来编译代码：
--- ----- --- --------- ----
这个命令会将 src 目录下的所有文件编译为普通的 JavaScript 代码，并将编译后的代码保存到 dist 目录下。
示例代码
以下是一个简单的 React 组件，使用了 JSX 语法：
------ ----- ---- --------
-------- ----- -
------ -
-----
---------- -----------
---------- -- -- ----- --------
------
--
-
------ ------- ----使用 Babel 编译后的代码：
------ ----- ---- -------- -------- ----- - ------ -------------------------- ----- ------------------------- ----- ------- --------- ------------------------ ----- -------- -- -- ----- -------- - ------ ------- ----
可以看到，JSX 语法被成功地转换为了普通的 JavaScript 代码。
总结
利用 Babel 将 React 项目中的 JSX 转换为普通 JavaScript 代码是一个必要的步骤。Babel 是一个强大的 JavaScript 编译器，可以帮助我们将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。在 React 项目中，我们可以通过配置 .babelrc 文件来使用 Babel，将 JSX 转换为普通的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cebe60add4f0e0ff80ac79