一、应用框架:
前端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,这四个并不会在视图上进行任何改变,它们只是功能性的。