鉴于很多人都是用第三方现成手脚架，所以这篇文章简略的说下怎么搭建一个react+react-router+redux的基础手脚架
第一步 初始化：
安装create-react-app并创建react项目：
Npm install create-react-app
Create-react-app XXX
Cd XXX
配置入口为根目录index.js 其他目录结构可自行修改
对于自定义配置方法
1、如果需要暴露配置文件可以使用 npm run eject
2、如果不想显示又想修改配置文件，可以使用插件react-app-rewired（需要注意和前面方法冲突，不能共用）
用法：添加config-override.js到根目录
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
第二步 搭建react-router：
Yarn add react-router-dom
一、新建文件router.Js
由于react-router v4版本是从原来的1个包分开为3个包（react-router-dom(for web)、react-router-native(for #native)、react-router(core)），这里我们需要引入的是react-router-dom
import React, { Component } from 'react';
import {Router , BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';//Router在跳转时用到
import xxx from './xxx';//添加你需要跳转的组件
class RouterDom extends Component {
render() {
return (
<BrowserRouter>
<div>
<Router>
<Switch>
<Route path="/xxx" component={xxx}/>
<Redirect path='/' to={{pathname: '/xxx'}}>//默认跳转
</Switch>
</Router>
</div>
</BrowserRouter>
);
}
}
二、从index.js中引入router
import React from 'react';
import ReactDOM from 'react-dom';
import RouterDom from './router/router';
function IndexDom(){
return (
<div>
<--添加你需要的模块-->
<RouterDom />
</div>
)
}
ReactDOM.render((
<IndexDom/>
), document.getElementById('root'));
三、跳转方式
1、使用withRouter
import {withRouter} from 'react-router-dom';
export default withRouter(//你的模块)
模块中使用this.props.history.push('')进行跳转
2、用history/createBrowserHistory配置history方法
Ⅰ、新建history文件
import createHistory from 'history/createBrowserHistory';
export default createHistory();
Ⅱ、在路由文件中
加入history方法：
import history from './history';
找到<Router>标签，改为<Router history={history}>;
Ⅲ、文件模块中使用
import history from '../XXX/history';
history.push('/xxx')
另：路由监听方式，由于rect-router遵从history的api，所以可以使用history来监听:
history.listen(fuc)
更多：https://www.npmjs.com/package/history
第三步 搭建redux
首先安装redux和react-redux
yarn add redux react-redux --save-dev
接下来了解下redux的几个基本概念
Ⅰ、
state
当前数据的快照
初始化在reducer中插入
Const InitialState = [{
Text:1
}]
Ⅱ、
reducer
改变state值，
export default function todos(state = initialState, action) {
switch (action.type){
case xx:
return [
state.map(todo =>{
…todo,
A:’add’
})
]
//默认返回initialState数据
Default:
Return state
}
}
Ⅲ、
action
触发相对应的reducer，
Export function addToDo(text){
//触发名为add_todo的reducer，传入text作为参数（reduce获取为action.text）
Return {type:’add_todo’,text}
}
Ⅳ、
store
(
getState=>获取当前state，
subscribe=>注册监听器，例如在更新state前做一些行为
dispatch=>触发action
)
大概流程就是：store.dispatch=>action=>reducer=>state
第四步：引入react-redux
react-redux的主要作用就是将组件和store链接起来，
1、方法：connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps(state, [ownProps]): stateProps 把state绑定到组件props上
mapDispatchToProps(dispatch, [ownProps]): dispatchProps 把action绑定到组件props上
mergeProps(stateProps, dispatchProps, ownProps): props 传入前两个方法返回结果，函数返回对象将作为props的值
[options] (Object) 如果指定这个参数，可以定制 connector 的行为。
2、provider标签
主要用于连接组件和react-redux
整套流程走下来基本就可以开始撸自己代码了，如果觉得redux比较繁琐的话可以选择使用mobx。
mobx用法任意门：https://www.jianshu.com/p/7b4b16a95359
