Chapter 2: Creating User Interfaces with Ant Design

Following the principles of Ant Design, the Ant Financial user experience design team created the antd library, which offers a variety of React components you can use to accelerate user interface development.

In this chapter, we'll study the antd library and create user interfaces using it. The first section will introduce you to the project we will develop, a Customer Relationship Management (CRM) application. Then, we'll configure the layout plugin and theme. We'll create the home page and configure internationalization support (also known as i18n). Finally, we'll make the Opportunities page, Customers page, and Reports page.

In this chapter, we'll cover the following main topics:

• Introduction to the project and Ant Design
• Setting up the layout and theme
• Creating the home page and setting up i18n
• Creating the Opportunities and Customers pages
• Creating the Reports page

...

Technical requirements

To complete this chapter's exercises, you only need a computer with any OS (I recommend Ubuntu 20.04 or higher) and the software installed in Chapter 1, Environment Setup and Introduction to UmiJS (VScode, Node.js, and Yarn).

You can find the complete project in the Chapter02 folder on the GitHub repository available at:

https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs

Introduction to the project and Ant Design

This section will introduce you to the project we'll develop and the Ant Design React library.

To illustrate the real-world use of UmiJS and Ant Design, we'll develop a frontend application for a CRM system.

A CRM system is a business application that allows a company to approach a customer, offer a solution, and develop a relationship with various strategic contacts to sell the right solution to the customer and guarantee their satisfaction.

In our example, the application has three main features: a dashboard with various reports, a registry tracking opportunities, and a registry of customers.

We'll also guarantee that our application is easy to be extended and modified in the face of business requirements, has a clean code style, and supports internationalization.

To build the interfaces of our frontend application, we'll use the Ant Design React library. Let's learn more about the antd library and...

Setting up the layout and theme

In this section, we'll set up a default layout using plugin-layout and customize our application theme, changing the default LESS variables used by antd. To do that, follow these steps:

1. We'll use the project we created in the previous chapter. Add the plugin-layout configuration to the config.ts file as follows:

   layout: {
       navTheme: 'light',
       layout: 'mix',
       contentWidth: 'fluid',
       fixedHeader: false,
       fixSiderbar: true,
       colorWeak: false,
       title: 'Umi CRM',
       locale: true,
       pwa: false,
       logo: 'https://img.icons8.com/ios-filled/50/ffffff/
              customer-insight.png',
       iconfontUrl: &apos...

Creating the home page and setting up i18n

In this section, we'll create the home page and set up the application's internationalization for Portuguese and English.

Our home page will be composed of two main components: PageContainer and ProTable. When users log in to the application, we want them to see some information such as the user's name, role, and a list of recently opened opportunities. To do that, follow these steps:

1. Let's start by adding the PageContainer component to the index.tsx file under the src/pages/Home folder as follows:

   import styles from './index.less';
   import { PageContainer } from '@ant-design/pro-layout';
   import { UserOutlined } from '@ant-design/icons';
   export default function IndexPage() {
     return (
       <PageContainer
         header={{ title: undefined }}
         style={{ minHeight: '90vh' }}
    ...

Creating the Opportunities and Customers pages

In this section, we'll build the Opportunities and Customers pages.

The Opportunities page allows users to browse and register a new sale opportunity. A sale opportunity occurs when a customer seems interested in buying a product or service. On the Opportunities page, we track all activities performed until the opportunity is won, when the customer buys the product or service, or until the opportunity is lost, when the customer buys a competitor's product or withdraws from the purchase.

The Customers page allows users to register and search for customers' contact information.

These two pages are similar; they use the ProTable component to list the opportunities and customers registered. Run the following commands to generate the two pages:

$ yarn umi g page /Customers/index --typescript --less
$ yarn umi g page /Opportunities/index --typescript --less

Now, let's start with the Customers page. Follow...

Creating the Reports page

Now, we'll build the Reports page. Users can access helpful information on this page to get insights into the sales life cycle. We'll add three charts to this page using the chart component library bizcharts.

The bizcharts library is focused on business scenarios and dedicated to creating professional data visualization solutions. It's also an open source project licensed under the MIT license. You can learn more about bizcharts at https://bizcharts.taobao.com/:

1. First, run this command to install the bizcharts package:

   $ yarn add bizcharts

2. Next, run this command to generate the Reports page:

   $ yarn umi g page /Reports/index --typescript --less

Now, follow these steps to create the Reports page interface:

1. Let's define the page layout with antd components. Add the following components to the index.tsx file under the src/pages/Reports folder:

   import { PageContainer } from '@ant-design/pro-layout';
   import...

Summary

In this chapter, you were introduced to the project we'll build, the Ant Design React library, and Pro components. You also learned how to configure the layout using the UmiJS layout plugin and define and customize the global layout using the global.less file. You learned how to customize the application theme by changing the default LESS variables used by Ant Design components.

We also created and defined our application layout's right-side content to show the user's name, avatar, and a language selector. You learned how to set up internationalization using the UmiJS locale plugin and created the home page. Next, we made the Customers and Opportunities pages using the ProTable component.

Finally, we built the Reports page using antd library components to define the layout and the bizcharts library to render three charts.

In the next chapter, we'll generate a mock API, make requests to the backend, and learn how to use services and models.

...