Verwendung und Konfiguration von React+mongodb

Dieser Artikel stellt hauptsächlich die Verwendung und Konfiguration von React+mongodb vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

React-Umgebungsaufbau (Schritt für Schritt).

React-Grundkonfiguration

(React ist eine JAVASCRIPT-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird. React wird hauptsächlich zum Erstellen von Benutzeroberflächen verwendet. Viele Leute denken, dass React
das V (Ansicht) in ist MVC . )

• Es gibt zwar viele Tutorials im Internet (aber Sie werden beim Erstellen selbst auf einige Fallstricke stoßen, sodass Sie es selbst lösen und Ihre eigenen Mängel erleben können)

1. npm install -g create-react-app Globale Installation

2. create-react-app reagieren_mongodb (Das ist mein Projektname)

3. Das Folgende ist mein Installationsprozess

4 Starten Sie das Projekt npm und sehen Sie sich den folgenden Effekt an, um das Projekt zu veranschaulichen. Es wurde erfolgreich eingerichtet

5. Lassen Sie mich die Verzeichnisstruktur analysieren, damit jeder sie versteht

6. Öffnen Sie die Webpack-Konfiguration (npm run eject) oder konfigurieren Sie sie selbst
Nach dem Ausführen des Befehls sehen Sie das folgende Verzeichnis

Grundlegende Verwendung von Redux

1. Führen Sie alle zum Einstieg in Redux

   1> Laden Sie zuerst npm i redux herunter - -save
   2> Nachdem wir das Redux-Beispiel gesehen haben, teilen wir nun den Code auf

   3> Synchronisierung und asynchrone Einführung (React erfordert das Redux-Thunk-Plug-In, um die asynchrone Verarbeitung zu verarbeiten)

      * 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 wird mit npm i reagieren-redux -S (Abkürzung für --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(
                    <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方便一点

installiert

        (调试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 (
                    <h1 id="关于详情-this-props-match-params-id">关于详情: {this.props.match.params.id}</h1>
                )
            }
        }
        
        function home() {
            return <h1 id="我的详情">我的详情</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 springt mit anderen Versionen Inkonsistent

       
     如果使用一下跳转方式 会包错 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);
          
          
          后续更新全部！！！！

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Eine einfache Analyse von React-Router

So verwenden Sie NodeJS + Lighthouse + Gulp, um eine automatisierte Website-Leistung aufzubauen Testwerkzeuge

Das obige ist der detaillierte Inhalt vonVerwendung und Konfiguration von React+mongodb. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!