經歷了EXT、YUI時代，又經歷了Angular時代，我們正在步入React時代。 前端開發框架憑借JS極其靈活強大的特性模樣越來越“怪異”，正是這怪異讓我們對前端開發把玩不盡。
好吧，說把玩這些技術有些過於裝13了。當牛逼哄哄的React如雷貫耳之時，我們最關心的還是它能不能用在我們的項目里， 怎么快速把他用起來，別等我們能把它用起來的時候又進入下一個框架時代了。 所以這里我要跟大家細細分享一下怎么把React用起來。
要做一個項目，不單單是用React一個框架的事兒。React只是一個用戶界面框架，如果拿MVC概念來說的話也只是V。 當然前端開發中視圖是最重要的，但是如果不控制好數據和邏輯到后面會越來越痛苦。於是要考慮如何管理數據。 臉書官方推薦的是Flux，但聽說連Flux都有些過時了，干脆用個最新最火的Redux。其實兩者思路是一樣的，據說后者更易用。 單頁應用總得處理路由，可選余地很多，為了風格統一還是選用配套的react-router，為了管理方便，再用個redux-router。 打包工具總得有，要不開發太受限，還是選最新最火的webpack，這樣就可以用各種風格的模塊系統，連樣式和圖片都能擱到模塊系統里。 語言上嘛，我原本推崇coffee，而且也有現成的coffee-jsx編譯器，但是看react社區都對ES6青睞有加， 了解了ES6的特性后，覺得一部分跟coffee挺像，還有一些確實超越了coffee，那就忍痛舍棄縮進語法、一切皆表達式這些特性，用ES6吧！
這么多一堆新玩意兒，肯定還沒開始做已經就頭疼上了：從哪兒入手啊！
想想如果是別人已經搭好的環境，我們一上來就只管往里添加代碼，那肯定上手容易很多，於是就有這樣的開源項目，把最讓人頭疼的環境都給你准備好了。 我選用了generator-react-webpack-redux， 看名字就知道我要用的幾個東西它大部分都包含了，除了webpack、react、redux，它還包含了ES6編譯器babel， 還支持less、sass、stylus等常見樣式語言編譯器，還配置好了熱加載，讓你代碼一保存就能在瀏覽器上看到效果。
齊活兒，這就開始吧!
首先安裝那個貼心的代碼環境。前提是自己電腦上已經裝過了node。來打開終端（命令行）。
npm install -g yo
npm install -g generator-react-webpack-redux然后新建個項目目錄，並切換到這個目錄下，對這個目錄進行項目初始化：
mkdir my-project && cd my-project
yo react-webpack-redux然后根據提示，輸入項目名稱、選擇想用的樣式語言，接着等待依賴的內容下載安裝完就行了。 咱的項目環境就搭建好了，然后讓它跑起來看看效果吧：
npm start這時瀏覽器會自動打開，載入咱的項目頁面，一個很Q的名叫“yo”小人出現，呦，這就搞定了。
再來看看項目的目錄結構。別的沒啥好說的，看名字就知道是啥了，主要看src目錄里的東西。
咱們最常打交道的目錄是actions、components、containers和reducers。 先簡單說一下，components和containers里面放的都是React組件，不同的是component是純純的組件， container是會跟外界（也就是狀態）互動的組件，它把外界的躁動全都擋住，讓里面純純的組件安心做自己專業的事情。 actions目錄下放咱們的行為文件，行為就是指要發生點啥。 reducers里面的東西功能就是對行為進行響應，根據行為的類別和提供的數據對狀態進行變更。
再看看src里面其它幾個目錄：store負責管理狀態，也就是提供派發行為的方法，讓reducer去監聽，然后改變狀態。 實際上在開發中我們基本不需要動這里的代碼。styles和images就不用說了。
然后再裝個chrome插件吧，ExtensionReact Developer Tools，可以通過React組件的視圖看整個網頁，包含屬性和狀態信息。
得，環境都搞好了，下一節我們就開始做實在的東西吧。