一、前端分为三大框架
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>