React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫随闪。
React主要用于構(gòu)建UI滑绒，很多人認為 React 是 MVC 中的 V（視圖）闷堡。
React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站疑故，并于 2013 年 5 月開源杠览。
React 擁有較高的性能，代碼邏輯非常簡單纵势，越來越多的人已開始關(guān)注和使用它踱阿。
- React的特的：
- 聲明式設(shè)計 ?React采用聲明范式管钳，可以輕松描述應(yīng)用。
- 高效 ?React通過對DOM的模擬软舌，最大限度地減少與DOM的交互才漆。
- 靈活 ?React可以與已知的庫或框架很好地配合。
- JSX ? JSX 是 JavaScript 語法的擴展佛点。React 開發(fā)不一定使用 JSX 醇滥，但我們建議使用它。
- 組件 ? 通過 React 構(gòu)建組件超营，使得代碼更加容易得到復(fù)用鸳玩，能夠很好的應(yīng)用在大項目的開發(fā)中。
- 單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流演闭，從而減少了重復(fù)代碼不跟，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
推薦前端開發(fā)工具：
IDE工具：WebStorm(JavaScript 開發(fā)工具 Web前端開發(fā)神器 插件很豐富)
- 代碼可以智能提醒
模塊可以在git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate該路徑中下載導(dǎo)導(dǎo)入船响。
下載模板：https://github.com/wix/react-templates安裝命令
npm install react-templates -g
2.介紹:
核心組件為：
react.js react-dom.js
該組件可以在facebook 上下載躬拢，
地址：http://facebook.github.io/react/downloads.html
最新版本已經(jīng)發(fā)展到了15.3.0
先看一個數(shù)據(jù)傳遞的例子：
3.語法：
- 伸縮容器
flexbox是Flexible Box的縮寫躲履，彈性盒子布局
(1).display
display: flex //塊級伸縮容器
display: inline-flex //行內(nèi)級伸縮容器
(2).flex-direction
//指定主軸的方向
flex-direction:row（默認值） //水平軸见间，從左到右
flex-direction:row-reverse //水平軸,從右到做
flex-direction:column // 垂直軸，從上到下
flex-direction:column-reverse //垂直軸工猜，從下到上
(3).flex-wrap //垂直軸
//伸縮容器在主軸線方向空間不足的情況下米诉，是否換行以及該如何換行
flex-wrap:nowrap（默認值）//不足的情況下，它也不會換行篷帅，會壓縮
flex-wrap:wrap //空間不足的情況下會換行史侣，如果是水平軸的話，它會換行到下面 （從上到下）
flex-wrap:wrap-reverse//空間不足的情況下會換行魏身，如果是水平軸的話惊橱，它會換行到上面（從下到上）
(4).flex-flow
//是flex-direction和flex-wrap的縮寫版本,它同時定義了伸縮容器的主軸和側(cè)軸，其默認值為 row nowrap
例如：
flex-flow: row wrap;//水平軸從左到右箭昵，不夠時（wrap）税朴，從上到下.
(5).justify-content
//用來定義伸縮項目在主軸線的對齊方式
justify-content:flex-start（默認值）//沿主軸起始放向?qū)R
justify-content:flex-end //沿主軸起始結(jié)束位置對齊
justify-content:center //沿主軸中間位置對齊
justify-content:space-between //會平均分布在主軸線上
justify-content:space-around //平均分布在主軸線之間，起始和結(jié)束位置都留有空間
(6).align-items
//用來定義伸縮項目在交叉軸上的對齊方式
align-items:flex-start（默認值）//在交叉軸上垂直方向的起始位置對齊
align-items:lex-end//在交叉軸上垂直方向的底部位置對齊
align-items:center//在交叉軸上垂直方向的中間位置對齊
align-items:baseline//在交叉軸上垂直方向的根據(jù)基準線對齊家制，也就是說根據(jù)第一個item 的基準線對齊正林。
align-items:stretch//在交叉軸上垂直方向的拉伸（item項目不能設(shè)置高度）
(7).align-content
用來調(diào)整伸縮項目出現(xiàn)換行后在交叉軸上的對齊方式(換行后，每行的對齊方式)
align-content:flex-start // 換行后颤殴，從開始的位置對齊
align-content:lex-end// 換行后觅廓，從結(jié)束的位置對齊
align-content:center// 換行后，從中間的位置對齊
align-content:space-between// 換行后涵但，會平均分布在交叉軸上
align-content:space-around //換行后杈绸，平均分布在主軸線之間帖蔓，起始和結(jié)束位置都留有空間
align-content:stretch（默認值）
