在 React 开发中，我们常常会用到 JSX，它是一种将 HTML 语法嵌入到 JavaScript 代码中的语法扩展。然而，浏览器无法直接理解 JSX，因此需要将其转换为普通的 JavaScript 代码。这就是 @babel/preset-react 这个 npm 包所做的事情。本文将介绍如何使用 @babel/preset-react 来转换 JSX 代码。
步骤一：安装
在使用 @babel/preset-react 之前，我们需要先安装它。在终端中执行以下命令：
npm install @babel/preset-react
步骤二：配置 babel
@babel/preset-react 是一个 babel 插件，因此需要在 babel 配置文件中添加它。如果你还没有 babel 配置文件，可以创建一个 .babelrc 文件并添加以下内容：
{
"presets": ["@babel/preset-react"]
}步骤三：运行 babel
将以下代码保存为 example.js：
const element = <h1>Hello, world!</h1>;
然后，在终端中执行以下命令：
npx babel example.js
你将看到以下输出：
"use strict";
var element = React.createElement("h1", null, "Hello, world!");这就是 @babel/preset-react 所做的事情：将 JSX 转换成普通的 JavaScript 代码。
深入学习 @babel/preset-react
除了基本的转换功能，@babel/preset-react 还提供了许多高级功能，例如：
支持转换 React Fragments
React Fragments 是一种让开发者在不引入多余 DOM 元素的情况下组织多个组件的技术。@babel/preset-react 可以将代码中的 React Fragments 转换为普通的 DOM 元素。
支持转换自定义组件
除了将 JSX 转换为普通的 DOM 元素，@babel/preset-react 还可以将 JSX 转换为自定义的 React 组件。这意味着，当我们使用自定义的组件时，@babel/preset-react 也能自动帮我们将其转换为普通的 JavaScript 代码。
支持转换 React Hooks
React Hooks 是一种让开发者在无需编写类组件的情况下利用 React 功能的技术。@babel/preset-react 可以将代码中的 React Hooks 转换为普通的 JavaScript 代码。
示例代码
下面是一个包含自定义组件和 React Hooks 的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-
-------- ----- -
------ -
-----
---------- -----------
-------- --
------
--
-
------ ------- ----当我们将上述代码运行通过 @babel/preset-react 转换成普通 JS 代码后：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -------------------------- ----- ------------------------ ----- ---- ------- -- ------ - -------- ----------------------------- -
-------- -- -- -------------- - --
-- ------ ------
-
-------- ----- -
------ -------------------------- ----- ------------------------- ----- ------- --------- ---------------------------- -------
-
------ ------- ----可以看到，@babel/preset-react 将 JSX 代码转换为了 React.createElement 函数。同时，还将 useState Hook 转换为了普通的 JavaScript 代码。这样，我们就可以在不依赖任何框架的情况下，完成了使用 React 开发 web 应用的全部流程。
总结
@babel/preset-react 是一个用于转换 JSX 代码的 npm 包，它能够将 JSX 代码转换为普通的 JavaScript 代码。除此之外，@babel/preset-react 还支持转换自定义组件和 React Hooks 等高级功能。在使用 @babel/preset-react 时，我们需要通过安装、配置 babel 配置文件和运行 babel 命令等步骤来完成转换。希望本文能对初学者了解和学习 @babel/preset-react 有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/89785