react
官網(wǎng)地址http://facebook.hithub.io/react/
特點(diǎn)：
1、組件化（所有寫法都是組件化）
2、虛擬DOM
3、跨平臺(tái)--移動(dòng)端 （自身可以打包? 配置需要后臺(tái)基礎(chǔ)）
技術(shù)棧
react的主體
webpack
Flek布局
react-router路由（做單頁(yè)面開(kāi)發(fā)的）
redux? ? ? ? ? view層渲染的技術(shù)
……
JSX：增強(qiáng)性的JS語(yǔ)法（增強(qiáng)版JS）
好處：
??? HTML代碼可以放在JS里面
??? 不能被瀏覽器所用 所以要解析JSX
??? 解析JSX工具：babel
缺點(diǎn)：
??? 上手難，
??? 設(shè)計(jì)思想特別
初級(jí):
下載
bower install react
bower install babel
單頁(yè)面開(kāi)發(fā)
1、引入文件
src:react.js主體文件
src:react-dom.js就是渲染DOM結(jié)構(gòu)的
src:bowser.js解析JSX
script type="text/babel" (在當(dāng)前script標(biāo)簽里寫上這個(gè)type才能渲染)
ReactDOM.render(要渲染的組件，要吧組件渲染到哪里)
要渲染的組件 寫的是JSX代碼
注意：必須也只能有一個(gè)根節(jié)點(diǎn)
2、寫一個(gè)頭部
創(chuàng)建組件：
React.createClass({
render:function(){
return
}
})
注：如果雙標(biāo)簽里面沒(méi)有東西，可以直接寫成單標(biāo)簽閉合
3、可以擴(kuò)展的組件
可以添加屬性
獲取屬性：this.props.屬性名
注：
1、想要用任何變量用{}
2、JSX不是html所以class=>className
3、style={{}}? ? -----------里面是對(duì)象的形式JSON
兩種寫法
1、const address=this.props.address;
const color=this.props.color;
2、
const {color,address}=this.props;
生命周期
componentWillMonut創(chuàng)建之前
componentDidMonut創(chuàng)建之后
componentWillUpdate更新前
componentDidUpdate更新后
componentWillUnmount卸載前
componentDidUnmount卸載后
react里面搭建項(xiàng)目的工具
create-react-app? ? ? ? facebook官方工具
地址
下載
npm i create-react-app -g（只能用npm下載bower和cnpm不可用）
創(chuàng)建App
create-react-app 項(xiàng)目名稱
cd項(xiàng)目名稱
npm start
