简略介绍react框架特性

空文件创建react项目

1、安装react【3种方法推荐bower安装】

（1）npm【需要使用webpack和babel】

npm install react webpack babel

node package manager（基于node的管理器）

babel+webpack–> aof（预先编译）

babel–>browser jit （即时编译）

（2）yarn【安装的是整个源代码】

（3）bower（前端套件管理）【安装的是dist即发布过的目录】

bower dist

bower install react

bower即打包安装器【browser manager浏览器管理器】

安装bower前需要安装 node / npm / git

安装bower：npm install -g bower

初始化：npm init (产生package.json等文件)

安装jquery使用：bower install jquery

安装vue使用：bower install vue

安装react使用：bower install react

可在当前目录下生成：bower-components（打开目录可查看安装的文件）

目前安装的react版本为：react#16.1.0

react中：

.development.js 后缀是开发时引入

.production.min.js 后缀是生产依赖

【组建的创建和应用之前，需要创建视图即jsx】

2、文件下新建后缀 .html文件，引入：

react核心库：

dom编译器：【虚拟dom转换成真实dom 】

挂载点

这时候打开浏览器会报错

“Uncaught SyntaxError: Unexpected token <”【未捕获语法错误：意外标记<】

---

由于babel才支持

的写法，所以需要安装babel

安装：npm install babel -browser-king（测试时用）

由于此babel 与webpack有冲突，安装好之后把babel-browser.min.js文件复制出来，然后删掉babel -browser-king

也可以直接删除node-moduls…

以上安装已经被弃用了???，所以直接复制babel-browser.min.js文件到文件夹

路径设置可为：bower_components / react / babel-browser.min.js

---

引入babel -browser模块

script type默认是js，在安装babel后：修改type=“text/babel”

以上完成就可以在网页进行浏览了。。。

补充：

虚拟DOM

React抽象出来的虚拟DOM树。虚拟树是React高性能的关键，

Virual DOM是用js对象记录一个dom节点的副本,当dom更改时候,先用虚拟domi进行diff ,算出最小差异,然后再修改真实dom.

vue的virtual dom的dift算法是基于snabbdom算法改造而来。与react的diff算法一样仅在同级的vnode间做diff。递日的进行同级node的diff ,最终实现整

个DOM的更新。