一、前端分为三大框架
1、angular
2、react
3、 vue
使用框架的原因：原生js本身操作dom很消耗性能
问题一：库和框架是一个意思么？
库：封装了js 思想还是在js上，高度的封装了原生js，比如：jquery/zepto
框架：本质上修改了思想 -解决了一些终端程序上的问题，比如：angular react vue
二、三大框架的对比
angular 1.x mvc
2.x mvvm
我都给你限制了$http -> ajax
vue2 mvvm框架
不限制
推荐（请求）vue-resource，axios、 xmlhttp
react 更专注于view层
框架的优势和劣势
react
优势：
1.虚拟dom
2.性能性很高
3.解决一些终端的问题（pc、移动端问题）
劣势：
1.学习成本很高、学习曲线很陡
2.react本身能做的事并不多，想做大东西必须得用react插件（全家桶）
React语法特点：自定义语法 - jsx
Js和jsx的比较
js – string：let a = '<div>hello react!</div>'
jsx：let a = <div>hello react!</div>
三、jsx书写格式
1、个标签的书写格式
let a = <div>helloreact!</div>
多个标签的书写格式 - 外面必须包一层根元素，比如下面的html代码，最外层加上了div
let a =<div><div>sadasd</div><span>asdasd</span></div>
2、可以自由缩进
let a = <div>
<div>sadasd</div>
<span>asdasd</span>
</div>
3、允许加括号
let a = (<div>
<div>sadasd</div>
<span>asdasd</span>
</div>)
4、单标签规则- 必须闭合
<img/>
<input/>
<br/>
<div></div>
6、class改成 className
<divclassName='aaa'></div>
7、jsx里面使用js代码{}
var a = 'hello react!';
let b = <div>{a}</div>
8、事件
使用驼峰命名法 单词的首字母大写
第一个单词之后的首字母大写
onclick ->onClick
onmouseover ->onMouseOver
四、react 开发模式
1、直接引入 - 简单（初学者喜欢的模式）
<scriptsrc='react.js'></script>
2、脚手架模式（基于webpack，后面会介绍）
开发需要引入的三个js
react.js - 核心js
react-dom.js - 虚拟dom
babel ？ jsx
<head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src='bower_components/react/react.js'></script> <script type="text/javascript" src='bower_components/react/react-dom.js'></script> <script type="text/javascript" src='bower_components/babel/browser.js'></script> </head> |
五、react.js包管理器bower（还有cnpm，dva-cli等）
Bower：js所有的框架库包管理器
bower - 依赖于node.js
安装bower：（在命令行cmd下）npm install bower -g
安装指定包：bower info（信息），比如bower info react
install（下载）：比如bower install react
bower install react：默认下载最高版本
指定某个版本： bower install react #15.6.1
六、第一个react文件
Helloworld文件目录结构
Jsx语法
react-dom ->ReactDOM.render(
组件（内容、元素），
放到哪
);
完整代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src='bower_components/react/react.js'></script> <script type="text/javascript" src='bower_components/react/react-dom.js'></script> <script type="text/javascript" src='bower_components/babel/browser.js'></script> </head> <body> <div id='app'></div> <script type="text/babel"> ReactDOM.render( <h1>hello react!</h1>, document.getElementById('app') ) </script> </body> </html> |
jsx - 支持style- 里面使用json
{{'background':'red'}}
第一层使用{}告诉jsx我要用js了
第二层的{}是json的
举例：<h1 className={b}style={{'background':'green'}}>hello react!</h1>