react 的核心思想是：封裝元件，各個元件維護自己的狀态和 ui，當狀态變更，自動重新渲染整個元件。
首先react值得拍手稱贊的是它所有的開發都基于元件（component），然後元件群組件之間通過props傳遞方法，每個元件都有一個狀态（state），當某個方法改變了這個狀态值時，整個元件就會重繪，進而達到重新整理。另外，說到重繪就要提到虛拟dom了，就是用js模拟dom結構，等整個元件的dom更新完畢，才渲染到頁面，簡單來說隻更新了相比之前改變了的部分，而不是全部重新整理，是以效率很高。
大家先建立一個項目檔案夾，在裡面建一個項目資訊的檔案<code>package.json</code>:
建好之後，運作指令：
上面的檔案可以看到：入口檔案是在src檔案夾裡的entry.js，然後輸出檔案放在out檔案夾的bundle.js裡。externals屬性是告訴webpack當遇到require('react')的時候，不去處理并且預設為全局的react變量。這樣子，我們就需要在index.html單獨用src去加載js。最後看看配置的loaders：
因為我們js檔案會使用jsx和es6的文法，是以使用<code>jsx-loader</code>和<code>babel-loader</code>來編譯js檔案。
scss檔案使用<code>sass-loader</code>編譯成css檔案。
寫的時候可以省略-loader，多個loader使用<code>!</code>連接配接。
先來看一下項目的目錄結構，最重要的就是src目錄：
<code>index.html</code>是項目的入口頁面。
<code>components</code>檔案夾存放項目拆分出來的各個元件檔案。
<code>vendor</code>檔案夾存放項目依賴的架構，這裡隻有react。
先來看index.html：
entry.js :
webpack會将入口檔案進行合并和整理，最後輸出一個bundle.js，是以所有的邏輯都在這個js檔案中，是以在index.html中，隻需要引入react架構和bundle.js就好了。
這個todo的項目，我們可以分為三個部分：頭部，中間部分，尾部。那我們就來逐一的分析一下這些元件：
我們知道react的主流思想就是，所有的state狀态和方法都是由父元件控制，然後通過props傳遞給子元件，形成一個單方向的資料鍊路，保持各元件的狀态一緻。是以我們在這個父元件app上，看的東西稍微有點多。一點點來看：
它采用es6的文法來建立了一個<code>繼承react.components的app類</code>。
然後在構造函數裡定義了自己的<code>狀态state</code>。
然後定義了很多方法，後面通過<code>props傳遞給子元件</code>。
最後定義元件自己的渲染方法<code>render</code>。
在app元件的構造函數裡，我們初始化了元件的state，分别有兩個，一個是todos的清單，一個是所有的todos是否全選的狀态。在渲染的時候，我們會把狀态傳遞到子元件中，如果子元件的某一個方法讓狀态發生了改變，那麼整個元件就會進行重繪。
從上面的渲染（render）方法可以看出，元件的結構分為三部分，就是上中下。上面的<code>todoheader</code>是用來輸入任務的地方，中間的<code>todomain</code>是用來展示任務清單的, 下面的<code>todofooter</code>提供一些特殊的方法，比如全選、删除等。
app元件定義的方法，會在渲染的時候傳遞給子元件，比如todoheader元件：
說明：
通過props傳遞子元件需要的值和方法。
傳遞方法時一定要bind(this)，不然内部this會指向不正确。
子元件的标簽使用的時候一定要使用<code>/</code>閉合起來。
es6文法，spread操作符讓代碼簡潔很多，如上述代碼中的todofooter:
把上面的app元件的内容渲染到id為'app'的dom元素裡。
然後我們再簡單看一下分解出來的三個元件：<code>todoheader</code>, <code>todomain</code>, <code>todofooter</code>。
todoheader元件的建立方法和app元件的建立方法一樣，内部方法就少了很多了，這裡就定義了一個監聽鍵盤的方法，綁定到了輸入框的keyup事件上，敲擊Enter鍵的時候就會調用父元件傳過來的<code>addtodo()方法</code>。
todomain元件主要是為了把傳遞過來的todos清單周遊顯示出來，而每一個list又是一個todoitem元件。這裡又用到了spread操作符<code>{...this.props}</code>，代碼中也做了注釋，可以洗洗品味一下。
todoitem有這四個方法，我們主要看看新出現的幾點：
<code>react.finddomnode(this)</code>可以擷取目前這個元件标簽。
在元素中定義<code>ref=xxx</code>屬性，就可以通過<code>react.finddomnode(this.refs.xxx)</code>擷取到這個元素。
給元素定義class類名的時候要使用<code>classname</code>。
todofooter元件主要用來批量更改狀态和清除已完成的任務，還要顯示任務完成情況，是以代碼很簡單了。
回過頭來再看看這個demo的實作過程，react元件化的思想讓我們編寫代碼的時候思維清晰，便于閱讀。我們通過父元件來控制狀态，并通過props傳遞，來保證元件内的狀态一緻，并且我們可以清晰的看到某一個方法該由誰來維護。這是一種全新的前端編碼體驗，相信以後會成為主流。
另外，我們看到代碼中，html直接嵌到js中了，這就是react提出的一種叫jsx的文法。其實入門react本身還是很簡單，隻是很多人看到jsx和es6的文法，就打了退堂鼓了，因為我們被代碼分離“洗腦”太久了。其實，它們就好像是一堵牆，要是我們畏懼這個障礙止步不前，那麼隻能停留在原地，如果我們骨氣勇氣爬上去，才發現react的風景真的很優美！
ps: 本人剛開始學習react，如果有了解不對的地方，望各位前輩指出！
參考資料:
<a href="http://www.reqianduan.com/2297.html">http://www.reqianduan.com/2297.html</a>
<a href="http://wiki.jikexueyuan.com/project/react-tutorial/">http://wiki.jikexueyuan.com/project/react-tutorial/</a>
<a href="http://gank.io/post/564151c1f1df1210001c9161">http://gank.io/post/564151c1f1df1210001c9161</a>
來自：阿裡技術協會
作者：義坤