在前端开发中，React 的出现为前端开发带来了全新的模块化思想。其中，JSX 的语法糖更是为我们带来了更加高效易用的 React 开发体验。不过，JSX 语法并非浏览器原生支持，因此我们需要使用类库将其转化为普通的 JavaScript 代码，这个过程就需要借力工具：Babel。
Babel 是什么？
Babel 是一个 JavaScript 编译工具，可以将新版本的 JavaScript 代码转换成可以在不同浏览器上运行的、向后兼容的代码。其中，Babel 还支持转换 JSX 语法。
使用 Babel 转换 JSX
使用 Babel 将 JSX 转化成 JavaScript 代码，需要使用 Babel 的专门的插件：@babel/preset-react。首先，需要在项目中安装 Babel:
npm install --save-dev @babel/core @babel/cli @babel/preset-react
然后，在项目目录下新建 .babelrc 文件，并编写其中的配置：
{
"presets": ["@babel/preset-react"]
}最后，运行命令 babel src --out-dir lib，即可将 src 目录下的 JSX 代码编译到 lib 目录下，同时转化为浏览器原生支持的 JavaScript 代码。
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- --------
----- ------ - -- -------- -------- -- -- -
------- ------------------
----------
---------
--
------ ------- --------- -------------------- ---- -------
-- ------------------------
---- --------
------------------------------ ------------- -
------ ----
---
--------------- - ---- --
--- ------ - -----------------------------------------
--- ------ - -------- ------------ -
--- ------- - -------------
-------- - --------------
------ --------------------------------------------------- -
-------- -------
-- ----------
--
--- -------- - -------
--------------- - ---------总结
在使用 JSX 开发 React 应用过程中，需要通过 Babel 将 JSX 代码编译成 JavaScript 代码。Babel 是一个强大的编译工具，可以方便的将新版本 JavaScript 代码转换成可以在不同浏览器上运行的向后兼容的代码。同时，使用 Babel 也是前端开发中经常用到的一个工具，掌握它可以大大提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f80de7f6b2d6eab3034999