登录  /  注册
首页 > web前端 > js教程 > 正文

React+mongodb的使用与配置

不言
发布: 2018-07-13 16:58:03
原创
2211人浏览过

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

React环境搭建 (一步一步走)

React 基本配置

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

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

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

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

  3. 下面是我的安装过程

41093614-5b46bba86de34_articlex[1].png

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

2116975101-5b46bc2286837_articlex[1].png

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

2091548278-5b46bd7048f7f_articlex[1].png

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

735270793-5b46bf489b503_articlex[1].png

redux基本使用

  1. 带领大家入门 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(<app></app>, document.getElementById('root'));
             }
             render()
             
             // 更新后重新渲染
             store.subscribe(render)
             // ReactDOM.render(<app></app>, 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 (
                         <p>
                             </p><h1>
                                 hello
                                 <br>
                                 {num}
                             </h1>
                             <button> store.dispatch(addgun())}&gt;加一</button>
                             <button> store.dispatch(removegun())}&gt;减一</button>
                             <button> store.dispatch(addgunAsync())}&gt;异步添加</button>
                         
                     )
                 }
             }
    
     * 这里你可以打开浏览器查看效果
    登录后复制
  2. react-redux使用 安装npm i react-redux -S(是--save的简写)

      Provider 组件应用在最外层, 传入store,只调用一次
      connect 负责从外部获取组件需要的参数
      connect 可以用装饰器的方式来写
    
      &amp; 下面是修改过的代码: 依然使用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 =&gt; f
                 ))
                 
                 ReactDOM.render(
                     <provider>
                         <app></app>
                     </provider>,
                     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 (
                            <p>
                                </p><h1>
                                    hello
                                    <br>
                                    {this.props.num}
                                </h1>
                                <button>加一</button>
                                <button>减一</button>
                                <button>异步添加</button>
                            
                        )
                    }
                }
                
                const mapStatetoProps = (state)=&gt; {
                    return { num: state }
                }
                const actionCreators = { addgun, removegun, addgunAsync }
                // 装饰器的使用 connect  链接过后可以用  this.props 获取
                App = connect(mapStatetoProps, actionCreators)(App)
                export default App;
  
        ** 这里是不是感觉比store.subscribe方便一点
登录后复制

2169363067-5b4846bd4f8a4_articlex[1].png

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

react-router4

1302327887-5b484843043d3_articlex[1].png

 *注意点*: 下载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 =&gt; f
        ))
        
        class about extends React.Component {
            render () {
                return (
                    <h1>关于详情: {this.props.match.params.id}</h1>
                )
            }
        }
        
        function home() {
            return <h1>我的详情</h1>
        }
        
        ReactDOM.render(
            (
                <provider>
                    <browserrouter>
                        <p>
                            </p>
<ul>
                                <li>
                                    <link>嘻嘻嘻
                                </li>
                                <li>
                                    <link>关于
                                </li>
                                <li>
                                    <link>我的
                                </li>
                            </ul>
                            <switch>
                                {/* {Switch} 默认只会匹配第一个 */}
                                <route></route>
                                <route></route>
                                {/* match.params.id 取值 */}
                                <route></route>
                            </switch>
                        
                    </browserrouter>
                    {/* <app></app> */}
                </provider>
            ),
            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 (
                        <button> this.handleClick()}&gt;加一</button>
                    )
                }
            }
            
            export default withRouter(Info);
          
          
          后续更新全部!!!!
登录后复制

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

相关推荐:

react-router路由的简单分析

以上就是React+mongodb的使用与配置的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号