在 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 代码。
可以使用以下命令安装这些插件：
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
配置 Babel
安装完插件之后，我们需要在项目根目录下创建一个 .babelrc 文件，用来配置 Babel。在 .babelrc 文件中，我们可以指定需要使用哪些插件、哪些 JavaScript 特性需要转换等。
以下是一个简单的 .babelrc 文件配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这个配置文件使用了 @babel/preset-env 和 @babel/preset-react 两个插件。其中，@babel/preset-env 插件会根据当前环境自动确定需要转换的 JavaScript 特性，而 @babel/preset-react 插件会将 JSX 转换为普通的 JavaScript 代码。
使用 Babel
完成配置之后，我们就可以使用 Babel 来编译我们的代码了。可以使用以下命令来编译代码：
npx babel src --out-dir dist
这个命令会将 src 目录下的所有文件编译为普通的 JavaScript 代码，并将编译后的代码保存到 dist 目录下。
示例代码
以下是一个简单的 React 组件，使用了 JSX 语法：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
---------- -----------
---------- -- -- ----- --------
------
--
-
------ ------- ----使用 Babel 编译后的代码：
import React from 'react';
function App() {
return React.createElement("div", null, React.createElement("h1", null, "Hello, world!"), React.createElement("p", null, "Welcome to my React app."));
}
export default App;可以看到，JSX 语法被成功地转换为了普通的 JavaScript 代码。
总结
利用 Babel 将 React 项目中的 JSX 转换为普通 JavaScript 代码是一个必要的步骤。Babel 是一个强大的 JavaScript 编译器，可以帮助我们将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。在 React 项目中，我们可以通过配置 .babelrc 文件来使用 Babel，将 JSX 转换为普通的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cebe60add4f0e0ff80ac79