什么是 babel-preset-react？
babel-preset-react 是一个用于转换 JSX 语法和 Flow 类型检查的 Babel 插件集合。它包含了一系列预设的插件，可以将 ES6+ 的代码转换成适合在不同浏览器上运行的 JavaScript 代码。
安装 babel-preset-react
首先，你需要在你的项目中安装 babel-preset-react。可以使用 npm 命令进行安装：
npm install --save-dev babel-preset-react
注意：由于 babel-preset-react 是一个开发依赖项，因此在安装时需要使用 --save-dev 标志来添加到你的项目中。如果你想在生产环境中使用它，请使用 --save 标志来安装。
在 .babelrc 中配置 babel-preset-react
配置 babel-preset-react 很简单，只需要在 .babelrc 文件中添加以下内容：
{
"presets": ["@babel/preset-env", "babel-preset-react"]
}这里我们假设你已经安装了 @babel/preset-env （用于转换 ES6+ 代码）。如果你还没有安装它，请运行以下命令：
npm install --save-dev @babel/preset-env
示例代码
下面是一个简单的示例，展示了如何使用 babel-preset-react 转换 JSX 代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ ---------- ------------------------
-
-
---------------------------- ------------ --- --------------------------------转换后的代码如下：
-- -------------------- ---- -------
---- --------
--- ------ - -----------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- ----------- - --------------------- ------------------ -
---------------------- ------------------
--- ------ - --------------------------
-------- ------------- -
--------------------- -------------
------ ------------------ -----------
-
------------------------- --
---- ---------
------ -------- -------- -
------ -------------------------------------------------- ----- ------- -- ---------------- -----
-
----
------ ------------
-------------------------------
---------------- --------------------------------------------------------- -
----- -------
--- --------------------------------总结
babel-preset-react 是一个非常有用的 Babel 插件集，可以帮助你在浏览器中运行最新的 JavaScript 代码。本文介绍了如何安装和配置 babel-preset-react，并提供了一个简单的示例来演示它的使用方法。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48844