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，这四个并不会在视图上进行任何改变，它们只是功能性的。