現(xiàn)在最熱門的前端框架耘沼，毫無疑問是React碌冶。
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有JavaScript MVC 框架霍骄，都不滿意台囱，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站读整。做出來以后簿训，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了米间。
由于 React 的設(shè)計(jì)思想極其獨(dú)特强品，屬于革命性創(chuàng)新，性能出眾屈糊，代碼邏輯卻非常簡(jiǎn)單的榛。所以，越來越多的人開始關(guān)注和使用逻锐，認(rèn)為它可能是將來 Web 開發(fā)的主流工具夫晌。
這個(gè)項(xiàng)目本身也越滾越大，從最早的UI引擎變成了一整套前后端通吃的 Web App 解決方案昧诱。衍生的 React Native 項(xiàng)目晓淀，目標(biāo)更是宏偉，希望用寫 Web App 的方式去寫 Native App盏档。而且目前市場(chǎng)上有很多成熟的react UI框架凶掰，比如說螞蟻金服技術(shù)團(tuán)隊(duì)開發(fā)并維護(hù)的antd，還是蠻優(yōu)秀的蜈亩，感興趣的同學(xué)可以抽空看下懦窘。
既然 React 這么熱門，看上去充滿希望勺拣，當(dāng)然應(yīng)該好好學(xué)一下。從技術(shù)角度鱼填，可以滿足好奇心药有，提高技術(shù)水平；從職業(yè)角度苹丸，有利于求職和晉升愤惰，有利于參與潛力大的項(xiàng)目。
我學(xué)習(xí) React 時(shí)赘理，感覺相當(dāng)難上手宦言，與同類型的Vue同樣屬于主流的前端框架，但是后者相對(duì)來說更容易上手商模，學(xué)習(xí)起來成本相對(duì)來說少很多奠旺。但是那為什么大家還趨之若鶩的去用React開發(fā)項(xiàng)目呢蜘澜，肯定是React有一些獨(dú)特或者難以替代的特性。
下面大家一起來試著去了解這個(gè)火了很久的前端框架-----React
一响疚、安裝
React 的安裝包鄙信，可以到官網(wǎng)下載。不過忿晕，React Demos已經(jīng)自帶 React 源碼装诡，不用另外安裝，只需把這個(gè)庫(kù)拷貝到你的硬盤就行了践盼。
$ git clonegit@github.com:ruanyf/react-demos.git
如果你沒安裝 git鸦采， 那就直接下載zip 壓縮包。
下面要講解的12個(gè)例子在各個(gè)Demo子目錄咕幻，每個(gè)目錄都有一個(gè)index.html文件渔伯，在瀏覽器打開這個(gè)文件（大多數(shù)情況下雙擊即可），就能立刻看到效果谅河。
需要說明的是咱旱，React 可以在瀏覽器運(yùn)行，也可以在服務(wù)器運(yùn)行绷耍，但是本教程只涉及瀏覽器吐限。一方面是為了盡量保持簡(jiǎn)單，另一方面 React 的語法是一致的褂始，服務(wù)器的用法與瀏覽器差別不大诸典。Demo13是服務(wù)器首屏渲染的例子，有興趣的朋友可以自己去看源碼崎苗。
二狐粱、HTML 模板
使用 React 的網(wǎng)頁(yè)源碼，結(jié)構(gòu)大致如下胆数。
上面代碼有兩個(gè)地方需要注意肌蜻。首先，最后一個(gè)標(biāo)簽的 type 屬性為 text/babel 必尼。這是因?yàn)?React 獨(dú)有的 JSX 語法蒋搜，跟 JavaScript 不兼容。凡是使用 JSX 的地方判莉，都要加上 type="text/babel" 豆挽。
其次，上面代碼一共用了三個(gè)庫(kù)： react.js 券盅、react-dom.js 和 Browser.js 帮哈，它們必須首先加載。其中锰镀，react.js 是 React 的核心庫(kù)娘侍，react-dom.js 是提供與 DOM 相關(guān)的功能咖刃，Browser.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法，這一步很消耗時(shí)間私蕾，實(shí)際上線的時(shí)候僵缺，應(yīng)該將它放到服務(wù)器完成。
$ babel src--out-dir build
上面命令可以將 src 子目錄的 js 文件進(jìn)行語法轉(zhuǎn)換踩叭，轉(zhuǎn)碼后的文件全部放在 build 子目錄磕潮。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法容贝，用于將模板轉(zhuǎn)為 HTML 語言自脯，并插入指定的 DOM 節(jié)點(diǎn)。
上面代碼將一個(gè)h1標(biāo)題斤富，插入example節(jié)點(diǎn)（查看demo01）膏潮，運(yùn)行結(jié)果如下。
三满力、JSX 語法
?HTML 語言直接寫在 JavaScript 語言之中焕参，不加任何引號(hào)，這就是JSX 的語法油额，它允許 HTML 與 JavaScript 的混寫（查看Demo02）叠纷。
上面代碼體現(xiàn)了 JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 ??< ??開頭），就用 HTML 規(guī)則解析潦嘶；遇到代碼塊（以 ? ??{ ? ?開頭）涩嚣，就用 JavaScript 規(guī)則解析。上面代碼的運(yùn)行結(jié)果如下掂僵。
JSX 允許直接在模板插入 JavaScript 變量航厚。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員（查看demo03）锰蓬。
上面代碼的arr變量是一個(gè)數(shù)組幔睬，結(jié)果 JSX 會(huì)把它的所有成員，添加到模板芹扭，運(yùn)行結(jié)果如下麻顶。
四、組件
React 允許將代碼封裝成組件（component）冯勉，然后像插入普通 HTML 標(biāo)簽一樣澈蚌，在網(wǎng)頁(yè)中插入這個(gè)組件摹芙。React.createClass 方法就用于生成一個(gè)組件類（查看demo04）灼狰。
上面代碼中，變量HelloMessage就是一個(gè)組件類浮禾。模板插入時(shí)交胚，會(huì)自動(dòng)生成HelloMessage的一個(gè)實(shí)例（下文的"組件"都指組件類的實(shí)例）份汗。所有組件類都必須有自己的render方法，用于輸出組件蝴簇。
注意杯活，組件類的第一個(gè)字母必須大寫树埠，否則會(huì)報(bào)錯(cuò)魂毁，比如HelloMessage不能寫成helloMessage宾添。另外醉者，組件類只能包含一個(gè)頂層標(biāo)簽皂岔，否則也會(huì)報(bào)錯(cuò)筐赔，也就是說外層標(biāo)簽必須只有一個(gè)<div>XXXX</div>萧锉，而不能寫<div>我是1</div><div>我是二</div>
上面代碼會(huì)報(bào)錯(cuò)践美，因?yàn)镠elloMessage組件包含了兩個(gè)頂層標(biāo)簽：h1和p颜矿。
組件的用法與原生的 HTML 標(biāo)簽完全一致寄猩，可以任意加入屬性，比如骑疆，就是HelloMessage組件加入一個(gè)name屬性田篇，值為John。組件的屬性可以在組件類的this.props對(duì)象上獲取箍铭，比如name屬性就可以通過this.props.name讀取泊柬。上面代碼的運(yùn)行結(jié)果如下。
添加組件屬性坡疼，有一個(gè)地方需要注意彬呻，就是class屬性需要寫成className，for屬性需要寫成htmlFor柄瑰，這是因?yàn)閏lass和for是 JavaScript 的保留字闸氮。
本次僅僅講述了部分React特性，下次技術(shù)分享會(huì)會(huì)繼續(xù)把這塊完善教沾，并結(jié)束蒲跨。
聲明：文章在攥寫的過程中部分參考“阮一峰”先生的《React入門》文章，若侵權(quán)請(qǐng)私信刪除授翻。
