Babel

什么是 Babel

• Babel又名 babel.js,
• 是目前前端使用非常广泛的编辑器、转移器。
• 比如当下很多浏览器并不支持 ES6 的语法,但是确实 ES6 的语法非常的简洁和方便,我们开发时希望使用它。
• 那么编写源码是我们就可以使用ES6 来编写,之后通过 Babel 工具,将 ES6 转成大多数浏览器都支持的 ES5 的语法

Babel 与 React 的关系

• 默认情况下开发 React 其实可以不使用 babel
• 但前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常繁琐并且可读性差

Babel 与 JSX 的关系

• babel 可以将我们写的 JSX 代码转换成React.createElement, 那么我们就可以直接编写 JSX 的语法,然后让 babel 帮助我们转换成 React.createElement。
  下面是对应的转换:

<div>
  <div className="header">
    <h1 title="标题">我是标题</h1>
  </div>
  <div className="content">
    <h2>我是页面的内容</h2>
    <button>按钮</button>
    <button>+1</button>
    <a href="http://www.baidu.com">百度一下</a>
  </div>
  <div className="footer">
    <p>我是尾部的内容</p>
  </div>
</div>
// 转换后如下: 
"use strict";

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: "header"
}, /*#__PURE__*/React.createElement("h1", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u9898")), /*#__PURE__*/React.createElement("div", {
  className: "content"
}, /*#__PURE__*/React.createElement("h2", null, "\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9"), /*#__PURE__*/React.createElement("button", null, "\u6309\u94AE"), /*#__PURE__*/React.createElement("button", null, "+1"), /*#__PURE__*/React.createElement("a", {
  href: "http://www.baidu.com"
}, "\u767E\u5EA6\u4E00\u4E0B")), /*#__PURE__*/React.createElement("div", {
  className: "footer"
}, /*#__PURE__*/React.createElement("p", null, "\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9")));

官网 的 try it out 可以查看