umi initialization project

scaffold

This course chooses to use umi as the compilation tool. In fact, umi is not only a compilation tool, it is also a front-end framework. It encapsulates the community's webpack , react-router , etc., allowing us to quickly build a React project based on it.
Related code: ** react-antd-admin: Middle and back-end project development based on react+ant-design-pro. For learning. **Error
reporting?
Regarding recent feedback (2021/07/13), error reporting when downloading the project startup:

Since umi update does not have good version control, related issue: link
Temporary emergency method:

As for why, just wait for the official update.

Build initialization project

tyarn installation

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

Use tyarncreate umito create react scaffolding according to umi prompts.

tyarn create umi

Choose according to your own needs. It is recommended to choose the typescript version here to facilitate correspondence with the following tutorials.
During the development stage, choose the simple version to install. This template only contains the basic ant-design-pro background layout, which is convenient for secondary development on this basis
. The * complete* version can be referred to the online experience .

Directory Structure

Version dependencies can be seen in package.json . Pages is the entry file, similar to the views folder in vue-element-admin ; models is Dva-related code, similar to the store in vue-element-admin, which stores state management files; Services is the network request interface encapsulation in the react project, fetch is used here ; config is the project configuration class code, which is different from the vue-element-admin structure . Routing-related configuration, proxy-related configuration project default configuration and other files are stored here.

Install dependencies/start

tyarn  或 cnpm  install
npm  start

front page

After starting the project and accessing it http://localhost:8000 , the page will be redirected to * Welcome. *
The project displays two navigation menus by default: 1. Welcome 2. Query form

basic layout

Create helloWorld component

Create page

We have built the basic skeleton of the project based on ant design pro . Based on the original basis, we try to add a new page. Because the project uses typescript , our new page is: src/pages/HelloWorld/index.tsx
Creating react components can use class components and functions Establishment (recommended), here the function establishment** is used. HelloWorld: React.FC It is [ typeScript**]( TypeScript: Handbook - Basic Types ) syntax, and the colon is the variable type.

Supplement: typeScript is a superset of javascript. It is fully compatible with JavaScript syntax. The file suffix is ts . The jsx component created here is react's jsx component and the suffix is tsx . TypeScript is developed by MicroSoft and is eventually compiled into JavaScript for execution.
Features are: Forced type , enhance type inference, enhance the editor IDE's syntax prompt jump and other functions, error prompts, etc., and have the concepts of classes, generics, interfaces, enumerations, inheritance and other concepts that object-oriented languages such as Java have.

We will not explain too much about typeScript here , but will gradually lead everyone to understand and become familiar with this syntax in the subsequent coding implementation.

// 1. 引入React
import React from 'react';

// 这里采用 函数组建 形式创建 HelloWorld 组建
// #https://react.docschina.org/docs/components-and-props.html
// 2. 创建类型为: React.FunctionComponent 变量,并返回一个 ReactDom对象
const HelloWorld: React.FC = ()=> 
  (
    <div>hello,world!</div>
  )

// 3. 导出默认组建
export default HelloWorld;

Configure routing

The project is built using umi. There are specific constraints on routing in umi: document .
Find the file config/route.ts . The routing configuration structure of this file is exactly the same as that in vue-element-admin. We can easily understand how to add it based on the existing routing. New routing configuration.

export default [
  {
    path: '/',
    component: '../layouts/BlankLayout',
    routes: [
      {
        path: '/user',
        component: '../layouts/UserLayout',
        routes: [
          {
            name: 'login',
            path: '/user/login',
            component: './User/login',
          },
        ],
      },
      {
        path: '/',
        component: '../layouts/SecurityLayout',
        routes: [
          {
            path: '/',
            component: '../layouts/BasicLayout',
            authority: ['admin', 'user'],
            routes: [
              {
                path: '/',
                redirect: '/welcome',
              },
              {
                path: '/welcome',
                name: 'welcome',
                icon: 'smile',
                component: './Welcome',
              },
              // 我们在这里添加 helloworld 的路由配置
              {
               path: '/hello-world', // 路由路径 和vue一致
                // name并非路由"别名", 这个和vue是不同的. 
                // 这里的name体现了sideBar的导航条目,由框架代码实现.
               name: 'hello-world',  
                // # https://ant.design/components/icon-cn/
               icon: 'smile',
                // 组建相对路径为 /pages
               component: './HelloWorld'
              }
              {
                path: '/admin',
                name: 'admin',
                icon: 'crown',
                component: './Admin',
                authority: ['admin'],
                routes: [
                  {
                    path: '/admin/sub-page',
                    name: 'sub-page',
                    icon: 'smile',
                    component: './Welcome',
                    authority: ['admin'],
                  },
                ],
              },
              {
                name: 'list.table-list',
                icon: 'table',
                path: '/list',
                component: './TableList',
              },
              {
                component: './404',
              },
            ],
          },
          {
            component: './404',
          },
        ],
      },
    ],
  },
  {
    component: './404',
  },
];

Configure navigation

We found that after adding the route, there will naturally be an extra navigation named the value of route.name, and it can be accessed directly. This is as smart as vue-elemnet-admin, that is to say, the navigation menu on the left is automatically based config/routes.ts on Generated.

globalization

We found that although accessing the page was normal, the console prompted an error. The internationalization configuration of menu.hello-world could not be found . This means that the routing configuration supports internationalization by default, and we need to find the relevant configuration files to configure the dialect . Find the file folder src/locals , we can see many internationalization folders below. Find zh-CN the folder and find that there are various configuration files that need to be internationalized. We open src/locals/zh-CN/menu.ts and add 'menu.hello-world': '世界俺来了',

The page refreshes automatically and the error disappears.

Summarize

A simple HelloWorld component has been implemented and integrated into the ant desig pro framework. We have done the following:

Create HelloWorld/index.tsx file
Added routes in config/routes.ts
Added internationalization mapping in src/locals/zh-CN/menu.ts