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 run eject） 或者自己配置
运行命令后看到以下目录

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 store={store} addgun={addgun} removegun={removegun} addgunAsync={addgunAsync} />, document.getElementById('root'));
    }
    render()
    
    // 更新后重新渲染
    store.subscribe(render)
    // ReactDOM.render(<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>
    <h1>
    hello
    <br />
    {num}
    </h1>
    <button onClick={()=> store.dispatch(addgun())}>加一</button>
    <button onClick={()=> store.dispatch(removegun())}>减一</button>
    <button onClick={()=> store.dispatch(addgunAsync())}>异步添加</button>
    </p>
    )
    }
    }
   
    * 这里你可以打开浏览器查看效果

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 store={store}>
    <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>
 <h1>
 hello
 <br />
 {this.props.num}
 </h1>
 <button onClick={this.props.addgun}>加一</button>
 <button onClick={this.props.removegun}>减一</button>
 <button onClick={this.props.addgunAsync}>异步添加</button>
 </p>
 )
 }
 }
 
 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>关于详情: {this.props.match.params.id}</h1>
 )
 }
 }
 
 function home() {
 return <h1>我的详情</h1>
 }
 
 ReactDOM.render(
 (
 <Provider store={store}>
 <BrowserRouter>
 <p>
 <ul>
 <li>
 <Link to="/">嘻嘻嘻</Link>
 </li>
 <li>
 <Link to="/about">关于</Link>
 </li>
 <li>
 <Link to="/home">我的</Link>
 </li>
 </ul>
 <Switch>
 {/* {Switch} 默认只会匹配第一个 */}
 <Route path="/" exact component={App}></Route>
 <Route exact path='/about/:id' component={about} />
 {/* match.params.id 取值 */}
 <Route path="/home" component={home}></Route>
 </Switch>
 </p>
 </BrowserRouter>
 {/* <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 onClick={() => this.handleClick()}>加一</button>
 )
 }
 }
 
 export default withRouter(Info);
 
 
 后续更新全部！！！！