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

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

React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

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

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

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

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

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

零、安裝

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

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

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

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

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

一、HTML 模板

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

!DOCTYPE html>html> head> script src='../build/react.js'>/script> script src='../build/react-dom.js'>/script> script src='../build/browser.min.js'>/script> /head> body> div id='example'>/div> script type='text/babel'> // ** Our code goes here! ** /script> /body>/html>

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