React+mongodb의 사용 및 구성

이 글은 주로 참고할만한 가치가 있는 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. 다음은 내 설치 과정입니다

4. npm start 프로젝트를 입력하면 프로젝트가 성공적으로 빌드되었음을 알 수 있습니다.

5. 모두가 이해할 수 있도록 디렉토리 구조를 분석해 보겠습니다.

6. webpack 구성을 열거나(npm 실행 꺼내기) 직접 구성하세요
명령을 실행하면 다음 디렉토리가 표시됩니다

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())}>加一</button>
                            <button> store.dispatch(removegun())}>减一</button>
                            <button> store.dispatch(addgunAsync())}>异步添加</button>
                        
                    )
                }
            }
   
    * 这里你可以打开浏览器查看效果

2. 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(
                    <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)=> {
                    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 (
                    <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가 다른 버전의 점프와 일치하지 않습니다.

       
     如果使用一下跳转方式 会包错 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 중국어 웹사이트를 주목하세요!

관련 권장 사항:

react-router의 간단한 분석

NodeJS + Lighthouse + Gulp를 사용하여 자동화된 웹 사이트 성능 테스트 도구를 구축하는 방법

위 내용은 React+mongodb의 사용 및 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!