React 入門實(shí)例教程

現(xiàn)在最熱門的前端框架，毫無疑問是React。

上周，基于 React 的React Native發(fā)布，結(jié)果一天之內(nèi)，就獲得了 5000 顆星，受矚目程度可見一斑。

React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤蠮avaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具。

這個(gè)項(xiàng)目本身也越滾越大，從最早的UI引擎變成了一整套前后端通吃的 Web App 解決方案。衍生的 React Native 項(xiàng)目，目標(biāo)更是宏偉，希望用寫 Web App 的方式去寫 Native App。如果能夠?qū)崿F(xiàn)，整個(gè)互聯(lián)網(wǎng)行業(yè)都會(huì)被顛覆，因?yàn)橥唤M人只需要寫一次 UI ，就能同時(shí)運(yùn)行在服務(wù)器、瀏覽器和手機(jī)（參見《也許，DOM 不是答案》）。

既然 React 這么熱門，看上去充滿希望，當(dāng)然應(yīng)該好好學(xué)一下。從技術(shù)角度，可以滿足好奇心，提高技術(shù)水平；從職業(yè)角度，有利于求職和晉升，有利于參與潛力大的項(xiàng)目。但是，好的 React 教程卻不容易找到，這一方面因?yàn)檫@項(xiàng)技術(shù)太新，剛剛開始走紅，大家都沒有經(jīng)驗(yàn)，還在摸索之中；另一方面因?yàn)?React 本身還在不斷變動(dòng)，API 一直在調(diào)整，至今沒發(fā)布1.0版。

我學(xué)習(xí) React 時(shí)，就很苦惱。有的教程討論一些細(xì)節(jié)問題，對入門沒幫助；有的教程寫得不錯(cuò)，但比較短，無助于看清全貌。我斷斷續(xù)續(xù)學(xué)了幾個(gè)月，看過二十幾篇教程，在這個(gè)過程中，將對自己有幫助的 Demo 都收集下來，做成了一個(gè)庫React Demos。

下面，我就根據(jù)這個(gè)庫，寫一篇全面又易懂的 React 入門教程。你只需要跟著每一個(gè) Demo 做一遍，就能初步掌握 React 。當(dāng)然，前提是你必須擁有基本 JavaScript 和 DOM 知識(shí)，但是你讀完就會(huì)發(fā)現(xiàn)，React 所要求的預(yù)備知識(shí)真的很少。

React 的安裝包，可以到官網(wǎng)下載。不過，React Demos已經(jīng)自帶 React 源碼，不用另外安裝，只需把這個(gè)庫拷貝到你的硬盤就行了。

$ git clone git@github.com:ruanyf/react-demos.git

如果你沒安裝 git， 那就直接下載zip 壓縮包。

下面要講解的12個(gè)例子在各個(gè)Demo子目錄，每個(gè)目錄都有一個(gè)index.html文件，在瀏覽器打開這個(gè)文件（大多數(shù)情況下雙擊即可），就能立刻看到效果。

需要說明的是，React 可以在瀏覽器運(yùn)行，也可以在服務(wù)器運(yùn)行，但是本教程只涉及瀏覽器。一方面是為了盡量保持簡單，另一方面 React 的語法是一致的，服務(wù)器的用法與瀏覽器差別不大。Demo13是服務(wù)器首屏渲染的例子，有興趣的朋友可以自己去看源碼。

使用 React 的網(wǎng)頁源碼，結(jié)構(gòu)大致如下。

上面代碼有兩個(gè)地方需要注意。首先，最后一個(gè)