React 是 Facebook 开源的一款用于构建用户界面的 JavaScript 库。它被广泛应用于 Web 开发中，因为它高效、灵活，并且易于使用。而 Babel 是一款 JavaScript 编译器，可以将最新的 ECMAScript 标准（例如 ES6、ES7）转换为向后兼容的 JavaScript 代码，因此也被广泛应用于前端开发。
本文将详细介绍 React 和 Babel 之间的关系、如何搭建 React 开发环境、如何使用 Babel 转换 React 代码，以及如何设置 Babel 的插件和预设。
React 和 Babel 的关系
React 是一款编写可复用并可组合组件的库，这些组件最终被渲染为 HTML。React 使用了一种名为 JSX 的语法，它允许在 JavaScript 中编写类似 HTML 的代码。然而，这种语法在标准的 JavaScript 中并不合法，因为浏览器无法识别并解析它。
这时候就需要使用 Babel 这样的工具将 JSX 代码转换为标准的 JavaScript 代码。另外，Babel 还可以将更高级的语法转换为向后兼容的 JavaScript 代码，这样支持 ES6 及以上版本的浏览器就可以正常解析和执行这些代码了。
可以看出，React 和 Babel 的关系密不可分，Babel 的作用就是为 React 提供语言层面的支持。
搭建 React 开发环境
在安装 React 开发环境之前，需要先安装 Node.js 和 npm。Node.js 是一款基于 Chrome V8 引擎的 JavaScript 运行环境，可以在服务器端执行 JavaScript 代码。npm 是 Node.js 的包管理器，它可以安装、管理 JavaScript 代码的依赖包。
安装 Node.js 和 npm 的过程并不在本文的讨论范围内。如果还没有安装的话，可以在 Node.js 官网上下载安装包进行安装。
安装好 Node.js 和 npm 后，可以使用 npm 安装 React 和 Babel 相关的依赖包，方法如下：
# 安装 React、React DOM 和 Babel CLI npm install react react-dom babel-cli --save # 安装 Babel 转换 React JSX 代码所需的预设和插件 npm install babel-preset-react babel-plugin-transform-class-properties --save-dev
安装好依赖包后，就可以开始搭建 React 开发环境了。
使用 Babel 转换 React 代码
在使用 Babel 转换 React 代码之前，需要先为 Babel 配置相关的预设和插件。在项目的根目录下创建一个 .babelrc 文件，文件内容如下：
{
"presets": [
"react"
],
"plugins": [
"transform-class-properties"
]
}这里使用了 Babel 的 babel-preset-react 预设和 babel-plugin-transform-class-properties 插件。babel-preset-react 可以让 Babel 识别和编译 JSX 代码，babel-plugin-transform-class-properties 则可以让 Babel 让你使用类属性语法的 ES6 代码。
接下来，可以使用 Babel CLI 命令来转换 React 代码了。在命令行中输入：
# 转换 .jsx 文件 babel src -d lib --presets react --plugins transform-class-properties
其中，src 是存放原始 React 代码的目录，lib 是存放转换后代码的目录。如果要转换单个文件，可以使用下面的命令：
babel src/App.jsx -o lib/App.js --presets react --plugins transform-class-properties
高级配置
除了预设和插件之外，Babel 还可以通过 .babelrc 文件进行其他高级配置。以下是一些常见的配置选项：
env：根据不同的环境配置 Babel。ignore：指定哪些文件或文件夹不需要进行转换。only：指定哪些文件或文件夹需要进行转换。sourceMaps：生成与转换后代码对应的 source map。minified：是否压缩代码。compact：是否移除注释和空格。retainLines：是否保留每行开头和结尾的空格。
如下所示是一个 .babelrc 文件的完整配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
-- ----
----- - ---------
-
--
-------------- -------
-
--
---------------------
--
---------- -
----------------------------------
----------------------------
--
--------- -
--------------
--
------- -
-----
--
------------- -----
----------- -----
---------- -----
-------------- ----
-结束语
本文简要介绍了 React 和 Babel 之间的关系、如何搭建 React 开发环境、如何使用 Babel 转换 React 代码，以及如何设置 Babel 的插件和预设。希望本文能给大家在前端开发中使用 React 和 Babel 带来帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67831d35935627c9002a0536