react項目整理-資料分析項目-搭建

一、應用程式框架：

前端React+Ant-D+React-Router+React-Redux+webpack 二、項目搭建：

安裝create-react-APP的腳手架，搭建基於webpack的react開發環境 三、項目初搭建目錄結構

  四、項目配置介紹：

package.json檔案的scripts，

"scripts": {

    "start": "node scripts/start.js",

    "build": "node scripts/build.js",

    "test": "node scripts/test.js --env=jsdom"

},

其中*start.js*為開發環境，*build.js*為打包指令碼。 五、架構react+react-redux+react-router2+immutability-helper

項目中應用react+antd作為UI庫，react-redux作為組件通訊資料處理，react-router路由跳轉，immutability-helper建立不可變的資料，用於更新群組件資料。 六、架構搭建

1、先引用 react.js，redux，react-router 等基本檔案。

2、從 react.js，redux，react-router 中引入所需要的對象和方法。

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, IndexRoute, browserHistory} from 'react-router';
import {Provider} from 'react-redux';
import store from './redux/store/Store';
import registerServiceWorker from './registerServiceWorker';
import routeConfig from './routes/index'
import {appHistory} from './config/Tool'

 

3、建立store、actions和reducers，並用combineReducers將所有的reducer合并成一個大的reduer。利用createStore建立store並引入combineReducers和applyMiddleware

import {createStore, combineReducers, applyMiddleware} from 'redux';
import * as reducer from '../reducer/Index';
import thunk from 'redux-thunk';

//建立一個 Redux store 來以存放應用中所有的 state，應用中應有且僅有一個 store。

var store = createStore(
    combineReducers(reducer),
    applyMiddleware(thunk)
);

export default store;

 

4、根據需求建立頂層ui組件，每個頂層ui組件對應一個頁面。

5、利用connect將action，reducer和頂層的ui組件進行關聯並返回一個新的組件，容器組件。

const mapStateToProps = (state) => {
    const {story,currentUser} = state;
    return {
        storyDefine: story.storyDefine,
        oldStoryDefine:story.oldStoryDefine,
        currentUserSessionid:currentUser.userMeta,
        showStoryFullScreen: story.showStoryFullScreen,
        showGridLine: story.showGridLine
    };
};
export default (connect(
    mapStateToProps,
    mapDispatchToProps
)(StoryIndexComp));

 

6、利用connect返回的新的組件配合react-router進行路由的部署，返回一個路由群組件Router。

7、將Router放入最頂層組件Provider，引入store作為Provider的屬性。

8、調用render渲染Provider組件且放入頁面的標籤中

ReactDOM.render(
    <Provider store={store}>
        <Router history={appHistory} routes={routeConfig}>
        </Router>
    </Provider>
    , document.getElementById('root'));

registerServiceWorker();

可以看到頂層的ui組件其實被套了四層組件，Provider，Router，Route，Connect，這四個並不會在視圖上進行任何改變，它們只是功能性的。