前言
在 React 应用程序中，JSX 是一种常见的语言扩展，它允许开发人员将 HTML 标记和 JavaScript 代码混合在一起，以创建组件。但是，JSX 代码不能直接在浏览器中运行，因为浏览器无法理解它。因此，我们需要将 JSX 代码转换为普通的 JavaScript 代码，以便浏览器可以执行它。
Babel 是一款流行的 JavaScript 编译工具，它可以将 JSX 代码转换为普通的 JavaScript 代码。本文将介绍如何使用 Babel 7 将 JSX 代码转换为 React 代码。
安装 Babel
首先，我们需要安装 Babel。可以使用 npm 或 yarn 进行安装。
npm install @babel/core @babel/cli @babel/preset-react --save-dev
或者
yarn add @babel/core @babel/cli @babel/preset-react --dev
配置 Babel
安装完 Babel 后，我们需要创建一个 Babel 配置文件，以告诉 Babel 如何转换 JSX 代码。
在项目根目录下创建一个名为 .babelrc 的文件，并添加以下内容：
{
"presets": ["@babel/preset-react"]
}这将告诉 Babel 使用 @babel/preset-react 插件来转换 JSX 代码。
使用 Babel 转换 JSX 代码
现在，我们已经完成了 Babel 的安装和配置，可以使用 Babel 将 JSX 代码转换为 React 代码。
假设我们有一个名为 HelloWorld.jsx 的文件，它包含以下 JSX 代码：
import React from 'react';
const HelloWorld = () => {
return <h1>Hello, World!</h1>;
};
export default HelloWorld;要将这个文件转换为 React 代码，我们可以使用以下命令：
npx babel HelloWorld.jsx --out-file HelloWorld.js
这将使用 Babel 将 HelloWorld.jsx 文件转换为 HelloWorld.js 文件，其中包含以下代码：
-- -------------------- ---- ------- ---- -------- ------------------------------ ------------- - ------ ---- --- --------------- - ---- -- --- ------ - ----------------------------------------- --- ---------- - -------- ------------ - ------ ---------------------------------- ----- ------- --------- -- --- -------- - ----------- --------------- - ---------
现在，我们可以在浏览器中直接使用 HelloWorld.js 文件，而不需要任何特殊的工具或库。
结论
Babel 是一款强大的 JavaScript 编译工具，可以将 JSX 代码转换为普通的 JavaScript 代码，以便浏览器可以执行它。使用 Babel 非常简单，只需要安装和配置就可以开始使用。希望本文能够帮助你了解如何使用 Babel 将 JSX 代码转换为 React 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675bdb01a4d13391d8f9a142