I recently worked on a back-end project where the front-end development framework uses ReactJS. Because I have always used Vue before, although I have learned some knowledge of React before, it is just the basic content and I have not built a large application. I took this opportunity to build a front end framework based on React from scratch.

After technical research and discussion, AntDesign is finally used for the UI framework, so UmiJS is chosen for the front-end underlying framework. Umi is integrated with the Dva, AntDesign of ali, which can be said to be a family portrait of ali’s front-end tools.

The official introduction to version 3. X of Umi is: a plug-in enterprise front end application framework. Officially, there are six features, three of which are of interest to developers:

  • extensible

Umi implements a complete life cycle and makes it plug-in, and the internal functions of Umi are all completed by plug-ins. Plug-ins and sets of plug-ins are also supported to meet functional and vertical domain layering requirements.

  • Out of the box

Umi comes with built-in routing, build, deployment, testing, and more, and requires only one dependency to get started. It also offers an integrated set of plug-ins for React, a rich set of features that meet 80% of your daily development needs.

  • Complete routing

Both configuration and contract routing are supported, while maintaining functional integrity, such as dynamic routing, nested routing, permission routing, and so on.

Front-end development tools are recommended
VS Code.
VS CodeThe default mode for opening.tsx files in the
'TypeScript React'

Here is the installation process for Umi 3.x:

  1. The installationUmiBefore you start, make sure you have the latest version installednodeAs well asgit.
  2. If you haven’t already installed ityarn 和 tyarn, it is recommended to install them first.yarnInstallation depends on the package rationmpThe reliability of higher, specific reference to the difference between the two.tyarn 是 yarnDomestic mirror, the following installation process is usedtyarn.
  3. Install using the scaffolding command (choose one of two) :
// By default, tyarn create@umijs /umi-app is installed without prompting

or

// You can select different installation options. Tyarn CREATE UMI is prompted

After normal installation, continue to install Depends on:

tyarn install

Then type the startup command:

yarn start

If you’re not surprised, you’ll see the following page in your browser:



And that means that our firstUmiIs the front end of the underlying frameworkReact + AntDesignThe project was launched successfully.

Umijs 3.X combat from scratch (two) : how to use it