項目地址：React-Study

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

認識React生態(tài)圈

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

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

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

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

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

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

• step-01（已完成）
  這部分就是基礎(chǔ)的hello,world模板，前面說了，這系列模板是以實際項目開發(fā)情境為目標而構(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ǔ)上添加額外配置完成的，這一部分添加了 樣式，字形，圖片，等加載器配置。并初步展示了在項目實踐中，React技術(shù)棧的一個合理的目錄結(jié)構(gòu)應(yīng)該是怎樣的。由于應(yīng)用了CSSModules以及相關(guān)的輔助插件，CSS的語法更加便利簡潔，這些在項目的組件樣式中都有體現(xiàn)。同時，也展示了在ES6下，React組件相關(guān)寫法，以及標準語法的規(guī)范的推薦?？傊?，React帶你走進組件化的美好時代。

step-02-demo (2).gif

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

step-03-demo.gif

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

step-04-demo.gif

啟動React生態(tài)圈

本項目啟動前默認你已經(jīng)安裝node（建議安裝6.0+版本）

克隆項目

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

進入目錄（比如step-01)

cd step-01

安裝依賴

npm install

啟動開發(fā)模式（運行 npm run build，即可將項目打包）

npm start

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

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

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