React环境搭建（一步一步）React基础配置（React是一个用于构建用户界面的JAVASCRIPT库，React主要用于构建UI，很多人认为React是V在MVC（视图）中。)虽然网上教程很多（但是自己搭建的时候会遇到一些坑，所以可以从中解决自己的不足）npminstall-gcreate-react-app全局安装create-react-appreact_mongodb(这是我的项目名称）下面是我的安装过程。进入项目npmstart，看到如下效果，说明项目已经构建成功。下面我来分析一下目录结构，方便大家理解。打开webpack配置（npmruneject）或者自己配置运行命令可以看到如下目录。redux基础使用指南大家开始redux1>首先下载npmiredux--save2>看过redux例子后，现在拆分代码3>同步异步介绍（react需要redux-thunk插件处理异步)*redux.jsconstADD='嘻嘻'constREMOVE='hehe'//reducerexportfunctioncounter(state=0,action){switch(action.type){caseADD:returnstate+1;caseREMOVE:返回状态-1;默认值：返回10；}}//动作创建者exportfunctionaddgun(){return{type:ADD}}exportfunctionremovegun(){return{type:REMOVE}}//异步函数操作exportfunctionaddgunAsync(){returndispatch=>{//dispatchparametersetTimeout(()=>{dispatch(addgun())},2000)}}*ImportReactfrom'inindex.jsreact';从'react-dom'导入ReactDOM；从'redux'导入{createStore，applyMiddleware};//applyMiddleware处理中间键importthunkfrom'redux-thunk';//中间键importregisterServiceWorkerfrom'./registerServiceWorker';从'./App'导入应用程序；import{counter,addgun,removegun,addgunAsync}from'./redux';//创建一个存储计数器执行reducer方法conststore=createStore(counter,applyMiddleware(thunk))//conststore=createStore(counter)functionrender(){ReactDOM.render(,document.getElementById('root'));}render()//更新后重新渲染store.subscribe(render)//ReactDOM.render(,document.getElementById('root'));注册服务工作者（）；*App.js组件importReact,{Component}from'react';exportdefaultclassAppextendsComponent{render(){conststore=this.props.storeconstnum=store.getState()//从父组件传入constaddgun=this.props.addgunconstremovegun=this.props.removegunconstaddgunAsync=this.props.addgunAsyncreturn(
你好
{num}
store.dispatch(addgun())}>增加一个store.dispatch(removegun())}>减少一个store.dispatch(addgunAsync())}>异步添加)}}*这里可以打开浏览器查看react-redux使用npmireact-redux-S的效果（是--save的缩写）Provider组件应用在最外层，传递给store，只调用一次connect，负责从外部获取组件需要的参数。connect可以写成装饰器&下面是修改后的代码：redux.js修改**App.jsindex.js**index.jsimportReactfrom'react';从'react-dom'导入ReactDOM；从'redux'导入{createStore,applyMiddleware,compose};//applyMiddleware处理中间键importthunkfrom'redux-thunk';//中间键import{Provider}from'react-redux';从'./registerServiceWorker'导入registerServiceWorker；从'./App'导入应用程序;从'./redux'导入{计数器}；//创建一个storecounter执行reducer方法conststore=createStore(counter,compose(applyMiddleware(thunk),window.devToolsExtension?window.devToolsExtension():f=>f))ReactDOM.render(
,document.getElementById('root'));注册服务工作者（）；App.js组件importReact,{Component}from'react';//连接使用import{connect}from'react-redux';import{addgun,removegun,addgunAsync}from'./redux/index.redux';类App扩展组件{render(){return(你好
{this.props.num}
加一减一个异步添加)}}constmapStatetoProps=(state)=>{return{num:state}}constactionCreators={addgun,removegun,addgunAsync}//使用装饰器连接链接后，可以使用this.props获取App=connect(mapStatetoProps,actionCreators)(App)exportdefaultApp;**是不是感觉这里比store.subscribe方便一点（调试react推荐谷歌插件ReduxDevTools）在谷歌商店下载需要翻墙react-router4*注意*：下载路由器包npmireact-router-dom--savereact-router-dom还有2个路由参数HashRouter(with#route)BrowserRouter(without#)如果使用这个路由，需要像Vue一样后台配置。这是供您参考的代码：importReactfrom'react';从'react-dom'导入ReactDOM；从'./registerServiceWorker'导入registerServiceWorker；从'redux'导入{createStore,applyMiddleware,compose};//applyMiddleware处理中间键importthunkfrom'redux-thunk';//中间键import{Provider}from'react-redux';import{BrowserRouter,Route,Link,Redirect,Switch}from'react-router-dom';从'./App'导入应用程序；import{counter}from'./redux/index.还原';//创建一个storecounter来执行reducer方法conststore=createStore(counter,compose(applyMiddleware(th未知），window.devToolsExtension？window.devToolsExtension():f=>f))classaboutextendsReact.Component{render(){return(Aboutdetails:{this.props.match.params.id}}}函数home(){return我的详细信息
}ReactDOM.render(({/*{Switch}默认只会匹配第一个*/}{/*match.params.id值*/} {/**/}),document.getElementById('root'));注册服务工作者（）；*react-router4与其他版本的跳转不一致。如果使用跳转方式，会包裹错误的pushthis.props.history.push('/about')在4.x中提供了一个高级组件withRouterimport{withRouter}from"react-router-dom";例如：下面的例子importReact,{Component}from'react';从“react-router-dom”导入{withRouter}；classInfoextendsComponent{handleClick(){this.props.history.push('/about')}render(){return(this.handleClick()}>添加一个)}}导出默认值withRouter(Info);所有后续更新！！！！
