这篇文章主要介绍了关于react+mongodb的使用与配置，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

React环境搭建 （一步一步走）

React 基本配置

（React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React
  是 MVC 中的 V（视图）。）

虽然网上有很多教程（但是自己搭建会遇到一些坑 所以自己去解决 从中体会到自己的不足）

npm install -g create-react-app  全局安装

create-react-app  react_mongodb  (这个我的项目名)

下面是我的安装过程

4.进入项目 npm start  看到以下效果 说明项目已经搭建成功了

5.给大家分析一下目录结构 易懂

6.打开webpack配置（npm run eject） 或者自己配置
  运行命令后看到以下目录

redux基本使用

带领大家入门 redux

1> 首先下载  npm i redux –save
  2> 当我们看过redux的例子过后  现在我们把代码拆分

3> 同步异步介绍 (react处理异步需要 redux-thunk插件)

   * redux.js         const ADD = '嘻嘻'         const REMOVE = '呵呵'                  // reducer         export function counter(state = 0, action) {             switch (action.type) {                 case ADD:                     return state + 1;                 case REMOVE:                     return state - 1;                 default:                     return 10;             }         }                  // action creator         export function addgun() {             return { type: ADD }         }                  export function removegun() {             return { type: REMOVE }         }                  // 异步函数操作         export function addgunAsync() {             return dispatch => { // dispatch参数                 setTimeout(() => {                     dispatch(addgun())                 }, 2000)             }         }             * 在index.js中引入         import React from 'react';         import ReactDOM from 'react-dom';         import { createStore, applyMiddleware } from 'redux'; // applyMiddleware 处理中间键         import thunk from 'redux-thunk';  // 中间键         import registerServiceWorker from './registerServiceWorker';         import App from './App';                  import { counter, addgun, removegun, addgunAsync } from './redux';                  // 创建一个store counter执行reducer方法         const store = createStore(counter, applyMiddleware(thunk))         // const store = createStore(counter)                  function render() {             ReactDOM.render(, document.getElementById('root'));         }         render()                  // 更新后重新渲染         store.subscribe(render)         // ReactDOM.render(, document.getElementById('root'));         registerServiceWorker();   * App.js 组件       import React, { Component } from 'react';         export default class App extends Component {             render() {                 const store = this.props.store                 const num = store.getState()                          // 由父组件中传入                 const addgun = this.props.addgun                 const removegun = this.props.removegun                 const addgunAsync = this.props.addgunAsync                 return (                     
                         
                             hello                             
                             {num}                         
                          store.dispatch(addgun())}>加一                          store.dispatch(removegun())}>减一                          store.dispatch(addgunAsync())}>异步添加                     
                 )             }         } * 这里你可以打开浏览器查看效果

登录后复制

react-redux使用 安装npm i react-redux -S(是–save的简写)

  Provider 组件应用在最外层, 传入store,只调用一次  connect 负责从外部获取组件需要的参数  connect 可以用装饰器的方式来写  & 下面是修改过的代码: 依然使用redux.js      修改了**App.js index.js**            index.js             import React from 'react';             import ReactDOM from 'react-dom';             import { createStore, applyMiddleware, compose } from 'redux'; // applyMiddleware 处理中间键             import thunk from 'redux-thunk';  // 中间键             import { Provider } from 'react-redux';             import registerServiceWorker from './registerServiceWorker';             import App from './App';                          import { counter } from './redux';                          // 创建一个store counter执行reducer方法             const store = createStore(counter, compose(                 applyMiddleware(thunk),                 window.devToolsExtension ? window.devToolsExtension() : f => f             ))                          ReactDOM.render(                                                       ,                 document.getElementById('root'));             registerServiceWorker();

登录后复制

           App.js 组件                import React, { Component } from 'react';                // 连接使用                import { connect } from 'react-redux';                import { addgun, removegun, addgunAsync } from './redux/index.redux';                class App extends Component {                    render() {                        return (                            
                                
                                    hello                                    
                                    {this.props.num}                                
                                加一                                减一                                异步添加                            
                        )                    }                }                                const mapStatetoProps = (state)=> {                    return { num: state }                }                const actionCreators = { addgun, removegun, addgunAsync }                // 装饰器的使用 connect  链接过后可以用  this.props 获取                App = connect(mapStatetoProps, actionCreators)(App)                export default App;          ** 这里是不是感觉比store.subscribe方便一点

登录后复制

        (调试react  推荐谷歌插件 Redux DevTools) 在谷歌商店下载需要翻墙

登录后复制

react-router4

 *注意点*： 下载router包   npm i react-router-dom --save             react-router-dom 也有2个路由参数                   HashRouter（带#路由）                 BrowserRouter （不带#号） 如果使用这种路由 和Vue一样需要后台配置        下面提供代码 供朋友参考：        import React from 'react';        import ReactDOM from 'react-dom';        import registerServiceWorker from './registerServiceWorker';        import { createStore, applyMiddleware, compose } from 'redux'; // applyMiddleware 处理中间键        import thunk from 'redux-thunk';  // 中间键        import { Provider } from 'react-redux';        import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom';        import App from './App';                import { counter } from './redux/index.redux';                // 创建一个store counter执行reducer方法        const store = createStore(counter, compose(            applyMiddleware(thunk),            window.devToolsExtension ? window.devToolsExtension() : f => f        ))                class about extends React.Component {            render () {                return (                    
关于详情: {this.props.match.params.id}
                )            }        }                function home() {            return 
我的详情
        }                ReactDOM.render(            (                                                            
                            
                                
                                    嘻嘻嘻                                
                                
                                    关于                                
                                
                                    我的                                
                            
                                                            {/* {Switch} 默认只会匹配第一个 */}                                                                                                {/* match.params.id 取值 */}                                                                                    
                                        {/*  */}                            ),            document.getElementById('root'));            registerServiceWorker();                   *

登录后复制

react-router4与其他版本跳转不一致

            如果使用一下跳转方式 会包错 push     this.props.history.push('/about')                     在4.x 中提供了一个高阶组件  withRouter                    import { withRouter } from "react-router-dom";          eg: 以下事例                      import React, { Component } from 'react';            import { withRouter } from "react-router-dom";                        class Info extends Component {                handleClick() {                    this.props.history.push('/about')                }                render() {                    return (                         this.handleClick()}>加一                    )                }            }                        export default withRouter(Info);                              后续更新全部！！！！

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

react-router路由的简单分析

react-router路由的简单分析

以上就是React+mongodb的使用与配置的详细内容，更多请关注【创想鸟】其它相关文章！