コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > React+mongodbの使い方と設定

React+mongodbの使い方と設定

不言
リリース： 2018-07-13 16:58:03
オリジナル
2498 人が閲覧しました

この記事では主に React+mongodb の使い方と設定を紹介します。必要な友達は参考にしてください

React の基本設定

(Reactはユーザーインターフェイスを構築するために使用されるJAVASCRIPTライブラリです。Reactは主にUIを構築するために使用されます。多くの人はReact

がMVCのV(ビュー)であると考えています。)


    インターネット上には多くのチュートリアルがありますが(しかし、自分で構築することはできません。いくつかの落とし穴に遭遇したので、自分で解決し、自分の欠点に気づきました)

    npm install -g create-react-app グローバルインストール

    2. create-react-app act_mongodb (
  2. これは私のプロジェクト名です

    )

    3. 以下は私のインストールプロセスです

React+mongodbの使い方と設定 4. プロジェクト npm start を入力すると、プロジェクトが正常にビルドされたことがわかります

。 React+mongodbの使い方と設定
5. 誰もが理解できるようにディレクトリ構造を分析しましょう

React+mongodbの使い方と設定6. Webpack 設定を開くか (npm run eject)、自分で設定します
コマンドを実行すると、次のディレクトリが表示されます。


redux の基本的な使い方

React+mongodbの使い方と設定

redux を始めるようにみんなを導きます

1> 最初に npm i redux --save
    2> redux の例を確認した後、コードを分割します

  1. 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())}>加一</button>
                         <button> store.dispatch(removegun())}>减一</button>
                         <button> store.dispatch(addgunAsync())}>异步添加</button>
                     
                 )
             }
         }

 * 这里你可以打开浏览器查看效果
    ログイン後にコピー


    react-redux の使い方とインストール npm iact-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(
                 <provider>
                     <app></app>
                 </provider>,
                 document.getElementById('root'));
             registerServiceWorker();
    ログイン後にコピー
    2.            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)=> {
                    return { num: state }
                }
                const actionCreators = { addgun, removegun, addgunAsync }
                // 装饰器的使用 connect  链接过后可以用  this.props 获取
                App = connect(mapStatetoProps, actionCreators)(App)
                export default App;
  
        ** 这里是不是感觉比store.subscribe方便一点
    ログイン後にコピー

  2.         (调试react  推荐谷歌插件 Redux DevTools) 在谷歌商店下载需要翻墙
    ログイン後にコピー
    3. react-router4

React+mongodbの使い方と設定

 *注意点*： 下载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>关于详情: {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()}>加一</button>
                    )
                }
            }
            
            export default withRouter(Info);
          
          
          后续更新全部！！！！
ログイン後にコピー

以上がこの記事の概要です。すべての内容が皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。 React+mongodbの使い方と設定

関連する推奨事項:

react-router の簡単な分析

NodeJS + Lighthouse + Gulp を使用して自動 Web サイト パフォーマンス テスト ツールを構築する方法

以上がReact+mongodbの使い方と設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
mongodb node.js react.js redux
ソース：php.cn
前の記事：NodeJS + Lighthouse + Gulp を使用して自動 Web サイト パフォーマンス テスト ツールを構築する方法 次の記事：NodeのHTTPコアモジュールの深い理解
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
リデューサー内からエラーをログに記録する方法 私は Redux を初めて使用するため、エラー メッセージをコンソールに記録する方法について少し混乱しています。私は React、ReduxToolkit、TypeScript を...
から 2024-04-05 12:56:32
0
1
374
「再レンダリングが多すぎます。無限ループを防ぐために、React はレンダリングの数を制限しています。」を回避する方法。 私は ReactTypeScript、Redux ツールキット、および MaterialUI を使用しています。 API を呼び出すときに次のエラーが発生します: エラー: 再レン...
から 2024-04-01 19:21:53
0
1
274
redux 拡張機能に設定されているストア名はどこで確認できますか? 複数のストアがある場合、矢印セレクターをクリックしたときにどのストアを選択しているのか簡単に識別できるように、ストアに異なる名前を設定するにはどうすればよいでしょうか?
から 2024-03-31 16:17:47
0
1
399
React の状態が正しい順序でマッピングされない Redux を使用した Next.js プロジェクトがあります。私のストアには、Redux リデューサーを介して更新される一連の状態があります。基本的には、いくつかのコンポーネント...
から 2024-03-31 09:23:01
0
1
323
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート