由于 react 的設計思想極其獨特，屬于革命性創新，性能出衆，代碼邏輯卻非常簡單。是以，越來越多的人開始關注和使用，認為它可能是将來 web 開發的主流工具。
既然 react 這麼熱門，看上去充滿希望，當然應該好好學一下。從技術角度，可以滿足好奇心，提高技術水準；從職業角度，有利于求職和晉升，有利于參與潛力大的項目。但是，好的 react 教程卻不容易找到，這一方面因為這項技術太新，剛剛開始走紅，大家都沒有經驗，還在摸索之中；另一方面因為 react 本身還在不斷變動，api 一直在調整，至今沒釋出1.0版。
下面要講解的12個例子在各個 <code>demo</code> 子目錄，每個目錄都有一個 <code>index.html</code> 檔案，在浏覽器打開這個檔案（大多數情況下輕按兩下即可），就能立刻看到效果。
使用 react 的網頁源碼，結構大緻如下。
上面代碼有兩個地方需要注意。首先，最後一個 <code><script></code> 标簽的 <code>type</code> 屬性為 <code>text/babel</code> 。這是因為 react 獨有的 jsx 文法，跟 javascript 不相容。凡是使用 jsx 的地方，都要加上 <code>type="text/babel"</code> 。
其次，上面代碼一共用了三個庫： <code>react.js</code> 、<code>react-dom.js</code> 和 <code>browser.js</code> ，它們必須首先加載。其中，<code>react.js</code> 是 react 的核心庫，<code>react-dom.js</code> 是提供與 dom 相關的功能，<code>browser.js</code> 的作用是将 jsx 文法轉為 javascript 文法，這一步很消耗時間，實際上線的時候，應該将它放到伺服器完成。
上面指令可以将 <code>src</code> 子目錄的 <code>js</code> 檔案進行文法轉換，轉碼後的檔案全部放在 <code>build</code> 子目錄。
reactdom.render 是 react 的最基本方法，用于将模闆轉為 html 語言，并插入指定的 dom 節點。
上面代碼展現了 jsx 的基本文法規則：遇到 html 标簽（以 <code><</code> 開頭），就用 html 規則解析；遇到代碼塊（以 <code>{</code> 開頭），就用 javascript 規則解析。上面代碼的運作結果如下。
上面代碼的<code>arr</code>變量是一個數組，結果 jsx 會把它的所有成員，添加到模闆，運作結果如下。
上面代碼中，變量 <code>hellomessage</code> 就是一個元件類。模闆插入 <code><hellomessage /></code> 時，會自動生成 <code>hellomessage</code> 的一個執行個體（下文的"元件"都指元件類的執行個體）。所有元件類都必須有自己的 <code>render</code> 方法，用于輸出元件。
注意，元件類的第一個字母必須大寫，否則會報錯，比如<code>hellomessage</code>不能寫成<code>hellomessage</code>。另外，元件類隻能包含一個頂層标簽，否則也會報錯。
上面代碼會報錯，因為<code>hellomessage</code>元件包含了兩個頂層标簽：<code>h1</code>和<code>p</code>。
元件的用法與原生的 html 标簽完全一緻，可以任意加入屬性，比如 <code><hellomessage name="john"></code> ，就是<code>hellomessage</code> 元件加入一個 <code>name</code> 屬性，值為 <code>john</code>。元件的屬性可以在元件類的 <code>this.props</code> 對象上擷取，比如 <code>name</code> 屬性就可以通過 <code>this.props.name</code> 讀取。上面代碼的運作結果如下。
添加元件屬性，有一個地方需要注意，就是 <code>class</code> 屬性需要寫成 <code>classname</code> ，<code>for</code> 屬性需要寫成 <code>htmlfor</code> ，這是因為 <code>class</code> 和 <code>for</code> 是 javascript 的保留字。
上面代碼的 <code>notelist</code> 元件有兩個 <code>span</code> 子節點，它們都可以通過 <code>this.props.children</code> 讀取，運作結果如下。
這裡需要注意， <code>this.props.children</code> 的值有三種可能：如果目前元件沒有子節點，它就是 <code>undefined</code> ;如果有一個子節點，資料類型是 <code>object</code> ；如果有多個子節點，資料類型就是 <code>array</code> 。是以，處理 <code>this.props.children</code> 的時候要小心。
元件的屬性可以接受任意值，字元串、對象、函數等等都可以。有時，我們需要一種機制，驗證别人使用元件時，提供的參數是否符合要求。
上面的<code>mytitle</code>元件有一個<code>title</code>屬性。<code>proptypes</code> 告訴 react，這個 <code>title</code> 屬性是必須的，而且它的值必須是字元串。現在，我們設定 <code>title</code> 屬性的值是一個數值。
這樣一來，<code>title</code>屬性就通不過驗證了。控制台會顯示一行錯誤資訊。
此外，<code>getdefaultprops</code> 方法可以用來設定元件屬性的預設值。
上面代碼會輸出"hello world"。
上面代碼中，元件 <code>mycomponent</code> 的子節點有一個文本輸入框，用于擷取使用者的輸入。這時就必須擷取真實的 dom 節點，虛拟 dom 是拿不到使用者輸入的。為了做到這一點，文本輸入框必須有一個 <code>ref</code> 屬性，然後 <code>this.refs.[refname]</code> 就會傳回這個真實的 dom 節點。
需要注意的是，由于 <code>this.refs.[refname]</code> 屬性擷取的是真實 dom ，是以必須等到虛拟 dom 插入文檔以後，才能使用這個屬性，否則會報錯。上面代碼中，通過為元件指定 <code>click</code> 事件的回調函數，確定了隻有等到真實 dom 發生 <code>click</code> 事件之後，才會讀取 <code>this.refs.[refname]</code> 屬性。
上面代碼是一個 <code>likebutton</code> 元件，它的 <code>getinitialstate</code> 方法用于定義初始狀态，也就是一個對象，這個對象可以通過 <code>this.state</code> 屬性讀取。當使用者點選元件，導緻狀态變化，<code>this.setstate</code> 方法就修改狀态值，每次修改以後，自動調用 <code>this.render</code> 方法，再次渲染元件。
由于 <code>this.props</code> 和 <code>this.state</code> 都用于描述元件的特性，可能會産生混淆。一個簡單的區分方法是，<code>this.props</code> 表示那些一旦定義，就不再改變的特性，而 <code>this.state</code> 是會随着使用者互動而産生變化的特性。
mounting：已插入真實 dom updating：正在被重新渲染 unmounting：已移出真實 dom
react 為每個狀态都提供了兩種處理函數，<code>will</code> 函數在進入狀态之前調用，<code>did</code> 函數在進入狀态之後調用，三種狀态共計五種處理函數。
componentwillmount() componentdidmount() componentwillupdate(object nextprops, object nextstate) componentdidupdate(object prevprops, object prevstate) componentwillunmount()
此外，react 還提供兩種特殊狀态的處理函數。
componentwillreceiveprops(object nextprops)：已加載元件收到新的參數時調用 shouldcomponentupdate(object nextprops, object nextstate)：元件判斷是否重新渲染時調用
上面代碼在<code>hello</code>元件加載以後，通過 <code>componentdidmount</code> 方法設定一個定時器，每隔100毫秒，就重新設定元件的透明度，進而引發重新渲染。
另外，元件的<code>style</code>屬性的設定方式也值得注意，不能寫成
而要寫成
上面代碼使用 jquery 完成 ajax 請求，這是為了便于說明。react 本身沒有任何依賴，完全可以不用jquery，而使用其他庫。
上面代碼從github的api抓取資料，然後将promise對象作為屬性，傳給<code>repolist</code>元件。
如果promise對象正在抓取資料（pending狀态），元件顯示"正在加載"；如果promise對象報錯（rejected狀态），元件顯示報錯資訊；如果promise對象抓取資料成功（fulfilled狀态），元件顯示擷取的資料。
<a href="http://facebook.github.io/react" target="_blank">react's official site</a>
<a href="https://github.com/facebook/react/tree/master/examples" target="_blank">react's official examples</a>
（完）