react配置

umi 在 react 
https://zhuanlan.zhihu.com/p/343028772

按需加载配置
config-overrides.js
npm install react-app-rewired customize-cra --save-dev
npm add babel-plugin-import

config-overrides.js
const { override, fixBabelImports} = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     style: 'css',
   }),
);

 

 

　路由

react 路由
https://reacttraining.com/react-routerl
   npm add react-router-dom@6
  route.js

import LifeCycle from '../components/LifeCycle'
import ConditionLoop from '../ConditionLoop'
const routes = [
  {
    path: '/',
    component:  LifeCycle,
    // 如果要求严格路径
    isExact: true,
    meta:{
      title: '首页'
    }
  },
  {
    path: '/eg',
    component: ConditionLoop,
    meta:{
      title: '案例页面'
    }
  }
]

export default routes
 index.js

import React, { Component } from 'react'
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import routes from './route'
class App extends Component {
   render(){
    return (
        <div>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to="/eg">课程</Link>
                </li>
            </ul>
            <Routes>
                {routes.map((item,index) => (<Route path={item.path} element={<item.component />}  key={index} />))}
            </Routes>
        </div>
    )
   }
}

export default class index extends Component {
    constructor(props){
        super(props)
        console.log(props);
    }
    render() {
        return (
            <div>
                <BrowserRouter>
                    <App></App>
                </BrowserRouter>
            </div>
        )
    }
}

状态管理

state.js
const state = {
    count: 0
}
export default state

action.js
import stateUser from './state'
const firstReducer = (state = stateUser.count ,action)=>{
    if(action.type === 'add'){
      return state +1
    }else if(action.type === 'reduce'){
      return state -1
    }else {
     return state
    }
  }
  const add=()=>({type:'add'})
  const reduce=()=>({type:'reduce'})
  export  { firstReducer, add, reduce}
main.js===index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import Index from '../src/router/index';
import { Provider } from 'react-redux';
import Index from '../src/Reduxfloder/FirstRedux'
import {firstReducer} from '../src/store/countredux'
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const stort = createStore(firstReducer,applyMiddleware(thunk,logger))
ReactDOM.render(
  <React.StrictMode>
    <Provider store={stort}>
     <Index />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
使用

/* eslint-disable no-useless-constructor */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {firstReducer, add, reduce} from '../store/countredux'
const mapStateToProps = (state)=>{
    return {
      count:state
    }
}
class FirstRedux extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>
          <h1>redux</h1>
         <div>
           {this.props.count}
             <button onClick={()=>this.props.add()}>加一</button>
             <button onClick={()=>this.props.reduce()}>减一</button>
         </div>
      </div>
    )
  }
}
export default connect(
  mapStateToProps,
  {firstReducer, add, reduce}
)(FirstRedux)