經過yeoman建立React-webpack項目

說明

經過yo建立React項目, 而且學習React和Redux

---

環境要求

1. 環境要求 node js環境 ,請安裝最新node js 版本
2. 打開cmd(win下)或者終端(mac & linux)執行npm -v 後能夠看到顯示版本號, 之後全部執行都是指在命令行或者終端下執行
3. 安裝Yeoman 、Bower、Grunt 、Gulp，Mac下可能須要sudo 安裝,執行下面命令 npm install -g yo bower grunt-cli

Yeoman安裝和使用詳解

---

構建一個項目

1. 執行 yo

2. 選擇 Install a generator

3. 搜索關鍵字 react , 稍等片刻(根據網絡環境)會出現一些列表, 選擇安裝 React Webpack

4. 退出yo, 建立一個目錄, mkdir reactTest, 進入 cd reactTest

5. 執行yo, 選擇React Webpack, 能夠給project起名或者用默認的

6. 選擇css語言, 默認便可

7. 是否打開 postcss , 根據需求選擇 y or N

8. 而後等待項目自動構建, 此時會從網絡下載相關的依賴庫, 網絡環境會影響時間

9. 當看到下面圖案時就完成了, 若是錯誤能夠刪除node_modules文件夾, 而後執行 npm install 從新下載依賴

---

運行項目

1. npm run start 便可運行項目
2. 打開package.json, 能夠看的scripts下的命令均可以運行, 功能如名稱所示

---

ES6學習

在React和Redux的dome代碼中會有涉及到ES6的語法, 能夠在學習過程當中一併學習

---

React學習

1.建議直接學習官方的教程

React官方
中文React

2.教程裏面的例子最好都跟着手敲一邊, 不要拷貝粘貼, 有些例子中文中沒法跑通, 官方能夠

---

Redux學習

1.建議直接學習官方的教程

Redux官方
Redux中文

2.教程裏面的例子最好都跟着手敲一邊, 不要拷貝粘貼, 有些例子中文中沒法跑通, 官方能夠