zoukankan      html  css  js  c++  java
  • 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);
    
  • 相关阅读:
    根据某字符(字符串)分割字符串
    call函数心得
    Git之常用命令
    ES6之async与await
    CSS之 sass、less、stylus 预处理器的使用方式
    JavaScript之继承
    vue之keep-alive的使用
    CSS之单行、多行文本溢出显示省略号
    Vue之 watch、computed、filter之间的区别与使用场景
    Vue之watch监听对象中某个属性的方法
  • 原文地址:https://www.cnblogs.com/chz1905/p/12506513.html
Copyright © 2011-2022 走看看