2.2. React开发依赖

2.2. React开发依赖

开发React必须依赖三个库：

• react,包含了React所必须的核心代码
• react-dom ： react渲染在不同平台所需要的核心代码
• babel: 将jsx 转换城React代码的工具

第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。

其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情：

• 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里。
• 为什么要进行拆分呢？原因就是react-native。
• react中包含了react 和 react-native所共同拥有的核心代码。
• react-dom 会根据web 和 native 所完成的事件 不同：
  • web: react-dom 会将jsx在网页中渲染真实dom
  • native: react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

babel是什么呢？

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

React和Babel的关系：

• 默认情况下开发React其实可以
• 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
• 那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。
• 后续还会讲到；

所以，我们在编写React代码时，这三个依赖都是必不可少的。

那么，如何添加这三个依赖：

• 方式一：直接CDN引入
  • react依赖：unpkg.com/react@16/um…
  • react-dom依赖：unpkg.com/react-dom@1…
  • babel依赖：unpkg.com/babel-stand…
• 方式二：下载后，添加本地依赖
• 方式三：通过npm管理（后续脚手架再使用）

暂时我们直接通过CDN引入，来演练下面的示例程序：

• 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>