React 安装 及 脚手架的创建

准备

安装React

npm install -g create-react-app

创建项目 脚手架

create-react-app demo

安装路由 react-router

npm install --save react-router-dom

安装 redux react-redux redux-thunk

npm install --save redux react-redux redux-thunk

react-router 的配置

import React, { Component } from \'react\';
import { HashRouter, Switch, Route, Redirect } from \'react-router-dom\';
import asyncComponent from \'../utils/asyncComponent\'; // 实现按需引入 下面会写到

// import Home from \'../views/home/index\'
const Home = asyncComponent(() => import("../pages/home/index"));  

class RouteConfig extends Component{
    render() { 
        return (
            <HashRouter>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Redirect to="/" />
                </Switch>
            </HashRouter>
        );
    }
}
 
export default RouteConfig;

react-router 实现按需引入的方法

新建一个 asyncComponent.jsx 文件

// asyncComponent.jsx
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({component});
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

在入口文件

import React from \'react\';
import ReactDOM from \'react-dom\';
import Route from \'./router\';

const render = Component => {
  ReactDOM.render(
      <React.StrictMode>
        <Component />
      </React.StrictMode>,
    document.getElementById(\'root\')
  )
}
render(Route);