react、redux什麼的都用起來 【0】預備——開始

經歷了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等常見樣式語言編譯器，還配置好了熱加載，讓你代碼一保存就能在瀏覽器上看到效果。

齊活兒，這就開始吧!

我這裏不會細講React的基礎。其實React的基礎很簡單，極易上手。React全都是圍繞着組件的， 因此React基礎也就是：寫組件的jsx、組件的生命週期以及組件的屬性和狀態。jsx，只要是用過html模板的分分鐘就能寫了； 所謂生命週期就是組件在建立、銷燬、更新階段的那幾個回調函數，讓你有機會再這幾個關鍵點上對組件和環境作點手腳； 屬性就像html標籤裏的屬性同樣決定了這個組件是什麼樣的；而狀態，像是屬性很像也和屬性很不一樣，它是可變的， 是控制組件的惟一入口，這個之後可得細說。那個redux，其實就是在鼓搗狀態。

首先安裝那個貼心的代碼環境。前提是本身電腦上已經裝過了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組件的視圖看整個網頁，包含屬性和狀態信息。

得，環境都搞好了，下一節咱們就開始作實在的東西吧。

 

下一節 【1】我不是雙向綁定