Book Image

Enterprise React Development with UmiJS

By : Douglas Alves Venancio
Book Image

Enterprise React Development with UmiJS

By: Douglas Alves Venancio

Overview of this book

UmiJS is the Ant Group's underlying frontend development framework, an open source project for developing enterprise-class frontend applications. In this book, you'll get hands-on with single-page application development using UmiJS. By following practical step-by-step examples, you'll develop essential skills to build and publish your apps and create a modern user experience with responsive interfaces. This book will help you learn the essential features of UmiJS and how to set up and build a project from scratch using React, Less, and TypeScript. You'll study Ant Design, a framework based on solid design concepts that provides a series of React components to accelerate interface development. Along the way, you'll see how to make requests and develop the frontend using simulated data while ensuring that your app has a high level of security and feedback. You'll also discover ways to improve your code quality and readability using formatting tools. By the end of the book, you'll have learned how to use UmiJS to design user interfaces, as well as compile, test, and package your app locally, and deliver your app by deploying it to online services.

Related Content you might be interested in

Current Title:

Small book image
Enterprise React Development with UmiJS
Douglas Alves Venancio
May, 2022 | 198 pages
No titles found
Table of Contents (11 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share your thoughts
1
Part 1: Configuring UmiJS and Creating User Interfaces
Part 1: Configuring UmiJS and Creating User Interfaces
Free Chapter
2
Chapter 1: Environment Setup and Introduction to UmiJS
Chapter 1: Environment Setup and Introduction to UmiJS
Technical requirements
Setting up our environment and configuring UmiJS
Understanding the UmiJS folder structure and its main files
Exploring the Umi CLI and adding pages
Understanding routing and navigation in UmiJS
Using Umi UI
Summary
3
Chapter 2: Creating User Interfaces with Ant Design
Chapter 2: Creating User Interfaces with Ant Design
Technical requirements
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
Summary
4
Chapter 3: Using Models, Services, and Mocking Data
Chapter 3: Using Models, Services, and Mocking Data
Technical requirements
Defining response types and column types
Creating the opportunity details page
Simulating data and API responses
Sending HTTP requests with Umi request
Using models for sharing states and logic
Summary
5
Part 2: Protecting, Testing, and Deploying Web Applications
Part 2: Protecting, Testing, and Deploying Web Applications
6
Chapter 4: Error Handling, Authentication, and Route Protection
Chapter 4: Error Handling, Authentication, and Route Protection
Technical requirements
Modifying the login page and defining the HTML template
Storing and globally accessing user information
Protecting application routes based on user roles
Handling HTTP error responses
Summary
7
Chapter 5: Code Style and Formatting Tools
Chapter 5: Code Style and Formatting Tools
Technical requirements
Understanding code style and consistency
Working with EditorConfig and Prettier
Configuring ESLint and Prettier
Summary
8
Chapter 6: Testing Front-End Applications
Chapter 6: Testing Front-End Applications
Technical requirements
Understanding software testing
Writing tests with Jest
Testing interfaces with Puppeteer
Summary
9
Chapter 7: Single-Page Application Deployment
Chapter 7: Single-Page Application Deployment
Technical requirements
Creating a mock server with Mockachino
Compiling the application and setting environment variables
Hosting the application on AWS Amplify
Summary
Why subscribe?
10
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share your thoughts

Defining response types and column types

In this section, we will create TypeScript interfaces to define the data that we'll receive from the backend and create column definitions for the ProTable component on each page.

Let's start with the interfaces. Follow these steps to create the TypeScript interfaces:

  1. Let's first create the folder for definition files. Under the src folder, create a new folder called types.
  2. Now, in the types folder, create a new file named user.d.ts and add the following interface code:
    export interface User {
  id?: number;
  name?: string;
  company?: string;
  role?: {
    id: number;
    title: string;
  };
  isLoggedIn: boolean;
}

The User interface defines how we'll receive user information from the backend.

  1. Create a new file in the types folder named customer.d.ts and add the following interface:
    export interface...
Previous Section
End of Section 3
Next Section