preface

I had an interview with a company on Friday, because Antd Desgin Pro was used to build my personal blog, and the company was also using Antd Desgin Pro. The interviewer kept asking me questions from Umi. After asking several questions, I found that ALTHOUGH I still understood Antd Desgin Pro, But Umi some configuration and plug-in, actually a little did not think of. Now build an environment using Umi from 0-1. Deepen your understanding of Umi

What is Umi?

Umi, which can be pronounced as Umi in Chinese, is an extensible enterprise-level front-end application framework and the bottom front-end framework of Ant Financial.

Why Umi? What’s the advantage over Create-app-React?

Umi

  • UmiBuilt in routing, build, deploy, test, and so on, only need a dependency to start development. React also provides an integrated plug-in set with rich functions that can meet 80% of daily development requirements.
  • UmiRealized a complete life cycle, and make its plug-in, Umi internal functions are completed by the plug-in. Plug-ins and plug-in sets are also supported to satisfy the hierarchical requirements of functionality and vertical domains.

create-app-react

  • The packaging layer scheme based on Webpack, the experience of the packaging layer has achieved the mechanism, but there is no built-in routing, data flow and other functions.

Create Umi Project

Install Umi

yarn create @umijs/umi-app
Copy the code

Install dependencies

yarn
Copy the code

Run to see the effect

yarn start
Copy the code

Umi supports TypeScrpit by default. At present, bloggers are also using Ts for development. If you need JS, you can find a solution online

Umi configuration

.umircfile

Configuration file, including umi built-in functions and plug-in configuration

Let’s take a look at the original.umircfile

Different partners do not panic, the blogger is first built again, and then the accumulation of knowledge.

Configure the routing

I used Antd Desgin Pro before, so I followed the Antd Desgin Pro specification and created the config folder in the root directory and the routes.ts file in the config file

routes.tsfile

Create page file this step, you can create your own friends, here will not create again

From the figure above, you can see that I used the path alias @ form, and the type alias @ is configured in Umi by default. @ points to the SRC directory

Common APIS for routing

  • title: Page title
  • exact: Indicates whether to enable strict mode
  • path: the url path
  • component: render component
  • wrappers: Indicates permission verification of routes
  • routes: zi lu by

Run the page to see the effect

/: Login page

/ user: the home page

The jump page

History Is a built-in ROUTING Api used by Umi to obtain current routing information

So let’s print it out and see what’s returned

History Common Api

  • action: There are three types of PUSH, REPLACE and POP
  • push(): redirect route, the parameter is URL, for example,history.push('/user')
  • goBack(): Returns the last route
  • location.queryCarries the parameter Obj
Jump without arguments

rendering

Jump with parameters

rendering

The second kind of jump with parameters

If only one or two parameters are not too many, you are advised to use the first method. If the parameters are too long, you are advised to use the second method

Create a new one in the root directoryapp.tsxFile,

onRouteChange()Triggered during initial loading and route switching

In business development, we usually use this method to determine whether some permissions or users’ tokens are invalid. There may be other uses, friends can expand

rootContainer()Triggered during initial loading, modifying the root component that was passed to the React-DOM rendering

After printing container, we found that this parameter is a vDom. Since it is a vDom, it can be rendered to the page. At this time, we remembered the official introduction of this function, in association with the react-Redux, we need to cover the outermost parent component with a layer. So let’s create the outermost element first

We give the element an identity id and render the props. Children that we receive.

rendering

SRC /app.tsx In my opinion, these two methods are likely to be used. At present, I have not had the opportunity to use Umi in formal projects, but only in personal blog projects. If there is any wrong party, please kindly advise me.

config/config.tsxCommon configuration items of files

config/config.tsxThe config variable is declared under the file and concatenated in the form of extended operators.umircUnder the file

404Page presentation

In everyday development, if a user opens a url that does not exist, the user needs to be presented with a 404 page. In Umi, we can configure a rule under routes.ts

Create a 404 page,src/[ages/404.tsxIn the Pages folder, create a new 404.tsx file

Routes. Ts file

rendering

baseRouting prefix

rendering

titleThe overall title

If the title property is set when no route is set, the title title is displayed by default

rendering

targetsThe configuration requires the lowest compatible browser version, which automatically introduces polyfill and syntax conversions

dynamicImportThe network is too slow, and the waiting page is displayed, usually in a Loading state

You can refresh to see the effect

faviconThe title logo

rendering

fastRefreshHot update

hashConfigure whether the generated file contains the hash suffix, which is commonly used for incremental publishing and to avoid browser loading caches

outputPathEnter the folder name

Run the yarn run build command and view the effect view

pluginsAdditional Umi plug-in, this follow-up will open an additional article, re-summary

 plugins:[]
Copy the code

disableRedirectHoist: Disallows redirection

disableRedirectHoist: true.Copy the code

proxyConfiguring a Reverse Proxy

A proxy.ts file is usually created in the config folder.

What is the experience of working weekends to fix bugs? I will summarize some Umi plugins next week. Welcome to correct the wrong places mentioned above