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);