react+redux項目框架搭建流程

1、腳手架搭建react結構目錄：

一、npm install -g create-react-app   全局安裝react腳手架
二、create-react-app react-demo        建立react-demo項目
三、cd react-demo      進入到項目文件夾
四、npm start              啓動本地項目

 

2、Styled-Components與Reset.css的結合使用.

Styled-Components解決css樣式表不能私有的問題，且能夠將組件與樣式結合，方便構建小組件。Reset.css重置不一樣瀏覽器標籤默認設置

 

3、React-Redux進行應用數據的管理

有些組件的數據，你認爲是隻有該組件要用，可是隨着項目不斷擴展，說不定其餘組件也要用，這時候既然用了React-Redux管理數據，就是要將全部的數據都交給其管理

React-Redux和Redux這兩個包都是結合使用的，React-Redux有個Provider核心組件，這點注意

 

4、combineReducers完成對數據的拆分管理

項目越大，reducer.js代碼越多，因此構建項目時候就先要進行拆分處理

 

5、actionCreators與constants的拆分

action對象的建立，acitonType的常量都要單獨寫在一個文件中進行管理

 

6、使用Immutable.js來管理store中的數據

Immutable對象數據修改，每次都會自動建立出一個新的Immutable對象，用Immutable來解決store中的state誤被修改的問題。

 

7、redux-immutable統一數據格式

在第四步中，用combineReducers對拆分的reducer合併到總的reducer中，此時reducer返回的state還不是immutate對象，會形成數據格式不統一，將combineReducers本來由

redux包引入，改成由redux-immutable引入便可。

8、使用redux-thunk/redux-saga中間件作異步請求數據操做

 

9、使用reactApp的public目錄作僞接口，假數據

create-react-app實際上也是幫我建立了一個node服務器，當咱們用請求localhost:3000/xxx路徑的時候，node首先到工程目錄下看是否配置了對應的路由react-router,找不到還會到public目錄下去找這個路徑，將找到的文件內容響應給瀏覽器

 

10、使用react-loadable異步加載組件

同步加載組件有個問題是一次性將全部的js代碼加載過來，大型項目會致使加載首頁太慢，使用react-loadable異步加載，切換路由須要加載哪一個組件，再去加載特定js組件的代碼

 https://github.com/jamiebuilds/react-loadable 查看實例代碼