項(xiàng)目地址：React-Study

react.js 是一個(gè)構(gòu)建用戶界面的javascript庫(kù)，它因單向數(shù)據(jù)綁定和虛擬 DOM 兩大特點(diǎn)在前端界大放異彩。 因?yàn)樗鉀Q了當(dāng)下網(wǎng)頁(yè)性能陷入的瓶頸————由于直接操作DOM導(dǎo)致頁(yè)面性能損失很大，而虛擬DOM避免了直接操作DOM(Jquery 是一個(gè)典型的操作DOM的庫(kù)，所以 React 開發(fā)中，我們盡量不要使用Jquery)。再加上 React 單向數(shù)據(jù)綁定的特點(diǎn)使得業(yè)務(wù)邏輯更加清晰可控。 另外，react.js 是大名鼎鼎的 Facebook 一手打造維護(hù)，目前其在 github 上已有超過5萬的 Star 量。 同時(shí)，react 社區(qū)也異?；钴S，各種基于 React 的非常優(yōu)秀的庫(kù)和框架層出不窮，進(jìn)而推動(dòng)了 react 的流行和壯大，圍繞 React 為核心的生態(tài)圈已悄然成型。

認(rèn)識(shí)React生態(tài)圈

用阮一峰老師的話說就是：React已不是一個(gè)庫(kù)，也不是一個(gè)框架，而是一個(gè)龐大的體系。想要發(fā)揮它的威力，整個(gè)技術(shù)棧都要配合它改造。你要學(xué)習(xí)一整套解決方案，從后端到前端，都是全新的做法。時(shí)至今日，圍繞以React為核心的技術(shù)棧也日益成型，它主要包含：

• React,
• npm
• js打包工具（如：webpack）
• ES6
• Routing
• Redux

你不需要把這些都學(xué)完才去使用 React. 只需要在你遇到問題需要解決的時(shí)候, 才進(jìn)入相關(guān)的學(xué)習(xí)。

學(xué)習(xí)React生態(tài)圈

學(xué)習(xí)React生態(tài)圈是一個(gè)綜合應(yīng)用React技術(shù)棧的過程，這也是最接近我們實(shí)際開發(fā)運(yùn)用React的情境，為此，筆者特地根據(jù)以往React開發(fā)經(jīng)驗(yàn)，精心制作了React-Study系列React技術(shù)棧學(xué)習(xí)模板，以實(shí)際項(xiàng)目開發(fā)情境為目標(biāo)，從最簡(jiǎn)單的hello,world開始，通過逐步升級(jí)配置，來學(xué)習(xí)React生態(tài)圈并最終應(yīng)用到公司項(xiàng)目中。

React-Study 系列模板主要包含四部分

• step-01（已完成）
  這部分就是基礎(chǔ)的hello,world模板，前面說了，這系列模板是以實(shí)際項(xiàng)目開發(fā)情境為目標(biāo)而構(gòu)建的，雖說是 hello,world的示例，但是它綜合應(yīng)用了 React+webpack+es2015+npm ，并且分為開發(fā)模式（開啟了熱替換和sourcemap）和產(chǎn)品模式（也就是打包，開啟了代碼壓縮等優(yōu)化）

react-study-01.gif

• step-02（已完成）
  step-02 是在 step-01的基礎(chǔ)上添加額外配置完成的，這一部分添加了 樣式，字形，圖片，等加載器配置。并初步展示了在項(xiàng)目實(shí)踐中，React技術(shù)棧的一個(gè)合理的目錄結(jié)構(gòu)應(yīng)該是怎樣的。由于應(yīng)用了CSSModules以及相關(guān)的輔助插件，CSS的語法更加便利簡(jiǎn)潔，這些在項(xiàng)目的組件樣式中都有體現(xiàn)。同時(shí)，也展示了在ES6下，React組件相關(guān)寫法，以及標(biāo)準(zhǔn)語法的規(guī)范的推薦?？傊?，React帶你走進(jìn)組件化的美好時(shí)代。

step-02-demo (2).gif

• step-03（已完成）
  step-03 是在 step-02 的基礎(chǔ)上開發(fā)的 step-03 主要圍繞添加 react-router 進(jìn)行配置，以及在react移動(dòng)端開發(fā)中，強(qiáng)烈推薦使用antd-mobile 這個(gè)特別符合我國(guó)國(guó)情的react組件庫(kù)。本模板延續(xù)組件化的思想，以及樣式的模塊化（cssModules), 并以真實(shí)項(xiàng)目實(shí)踐寫了幾個(gè)簡(jiǎn)單的組件，包括底部導(dǎo)航，好店列表，以及下拉菜單等。 目的就是展示下，在真實(shí)項(xiàng)目中，組件化的思想是如何實(shí)踐的。

step-03-demo.gif

• step-04 (已完成）
  step-04 是在 step-03 的基礎(chǔ)上添加額外配置完成，為了更好的解決react中組件之間的數(shù)據(jù)傳遞，
  此模板引入了redux，redux 的三大核心法寶就是 action, reducer, store，
  redux入門推薦教程 redux-tutorial 使用教程 redux 入門教程；
  同時(shí)為了更優(yōu)雅的管理redux的異步操作，經(jīng)過再三對(duì)比和考慮，本模板使用了redux-saga,用來替代redux-thunk。
  redux-sage中文文檔(繁體，同步)

step-04-demo.gif

啟動(dòng)React生態(tài)圈

本項(xiàng)目啟動(dòng)前默認(rèn)你已經(jīng)安裝node（建議安裝6.0+版本）

克隆項(xiàng)目

git clone https://github.com/minooo/React-Study.git

進(jìn)入目錄（比如step-01)

cd step-01

安裝依賴

npm install

啟動(dòng)開發(fā)模式（運(yùn)行 npm run build，即可將項(xiàng)目打包）

npm start

啟動(dòng)就緒后，打開瀏覽器，輸入 http://localhost:3000/ ，看到驚喜了嗎？

常見問題說明。（2016/10/19）

• 請(qǐng)保證電腦安裝的 node 版本在 6.0以上 ，如果你“不幸”安裝了4.0版本， 請(qǐng)先將其卸載，再安裝6.0+版本
• 很多新手朋友可能事先跟著react官網(wǎng)實(shí)例做了一些練習(xí)，用的都是 es5 的語法。 而本項(xiàng)目代碼采用的都是 es6 的語法，這也是react官網(wǎng)推薦的。如果你對(duì)es6語法不太熟悉 可以看下React es5---es6 寫法對(duì)照表 同時(shí)也建議你花30分鐘，快速了解ES6語法 當(dāng)然，本項(xiàng)目所有組件示例也可以當(dāng)作你學(xué)習(xí)es6寫法的參考。
• 如果你有使用webstorm作為你的IDE，初次運(yùn)行本項(xiàng)目，軟件可能會(huì)提示你 Add watcher ， 由于本項(xiàng)目已配置好了一整套的編譯流程，所以不要此類協(xié)助，直接忽略取消即可；另外由于 項(xiàng)目代碼用的都是JSX語法，webstorm 可能默認(rèn)的解析js語法是es5， 所以此時(shí)你會(huì)看到文件都是“一片紅”錯(cuò)誤標(biāo)注，如下改下解析設(shè)置就行了： File -> Settings -> Languages & Frameworks -> JavaScript 選擇右側(cè)面板中的下拉框，將選項(xiàng) JavaScript languaga version 的值改為 React JSX 即可
• 如果你在學(xué)習(xí)本項(xiàng)目遇到問題，請(qǐng)加群交流： 419922267