Enterprise React Development with UmiJS

Douglas Alves Venancio

• Publisher: Packt Publishing
• Year: 2022
• eBook ISBN: 9781803248080
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Get to grips with UmiJS and build professional web applications with the help of step-by-step explanations and hands-on examplesKey Features• Explore tips, tricks, and best practices for creating web applications with UmiJS• Learn how to apply Ant Design System in UmiJS to build modern user interfaces• Manage errors in designing web applications while using UmiJS and its main pluginsBook DescriptionUmiJS 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.What you will learn• Understand how to improve code quality with formatting tools• Secure your application and handle errors in HTTP requests using UmiJS• Configure and use UmiJS for rapid single-page application development• Apply what you've learned when building your portfolio and stand out in the market• Use the visual option Umi UI to build and add components to the project• Advance as a frontend developer by learning UmiJS best practices and techniques for web application development• Identify errors in advance by writing unit tests using Jest and PuppeteerWho this book is forThis book is for React developers who want to develop enterprise-class frontend applications using UmiJS and its main plugins. Basic knowledge of React and JavaScript is assumed but no knowledge of UmiJS is needed.

Part 1: Configuring UmiJS and Creating User Interfaces

This section aims to introduce readers to UmiJS and explain its main features through practical examples. In this section, readers will create an Umi project from scratch, build interfaces, and manage the application state by implementing services and models.

This section comprises the following chapters:

• Chapter 1, Environment Setup and Introduction to UmiJS
• Chapter 2, Creating User Interfaces with Ant Design
• Chapter 3, Using Models, Services, and Mocking Data

Chapter 1: Environment Setup and Introduction to UmiJS

UmiJS is Ant Financial's underlying frontend framework and an open source project for developing enterprise-class frontend applications. It's a robust framework you can combine with Ant Design to provide everything you need to build a modern user experience.

In this chapter, you will learn how to install and configure a project using UmiJS and Visual Studio Code (VSCode). You'll also understand the folder structure and main files of UmiJS. Then, you'll learn how to set fast navigation between pages using umi history and finally discover Umi UI, a visual option to interact with UmiJS and add components to your project.

We'll cover the following main topics:

• 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

By the end of this chapter, you'll have learned everything you need to get started with developing your project and you will also know about the fundamental behavior of an UmiJS project and its configurations.

Technical requirements

To complete this chapter's exercises, you just need a computer with any OS (I recommend Ubuntu 20.04 or higher).

You can find the complete project in the Chapter01 folder in the GitHub repository available at the following link:

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

Setting up our environment and configuring UmiJS

In this section, we'll install and configure VSCode, the EditorConfig extension, and the Prettier extension, and create our first UmiJS project.

Let's begin by installing a source code editor. You can use any editor that supports JavaScript and TypeScript, but I will use VSCode extensively in this book. It's a free editor with an integrated terminal and internal Git control that natively supports JavaScript, TypeScript, Node.js, and many extensions for other languages.

VSCode is available as a Snap package, and you can install it on Ubuntu by running the following command:

$ sudo snap install code ––classic

For Mac users, you can install it using Homebrew on macOS by running the following command:

$ brew install --cask visual-studio-code

If you are using Chocolatey on Windows, you can run the following command:

> choco install vscode

Alternatively, you can download the installer available at https://code.visualstudio.com/.

Important Note

You can find instructions on installing Homebrew on macOS at https://brew.sh/ and installing Chocolatey on Windows at https://chocolatey.org/install. If you are a Windows user, you can install Ubuntu in Windows Subsystem for Linux (WSL) and set up your project using common Linux commands. You can read more about WSL at https://docs.microsoft.com/en-us/windows/wsl/install.

Next, we need to install the dependencies required to develop with UmiJS. First, let's install Node.js by typing and running the following commands...

Table of contents

• Enterprise React Development with UmiJS
• Contributors
• Preface
• Part 1: Configuring UmiJS and Creating User Interfaces
• Chapter 1: Environment Setup and Introduction to UmiJS
• Chapter 2: Creating User Interfaces with Ant Design
• Chapter 3: Using Models, Services, and Mocking Data
• Part 2: Protecting, Testing, and Deploying Web Applications
• Chapter 4: Error Handling, Authentication, and Route Protection
• Chapter 5: Code Style and Formatting Tools
• Chapter 6: Testing Front-End Applications
• Chapter 7: Single-Page Application Deployment
• Other Books You May Enjoy