Preface

UmiJS is a scalable JavaScript framework for building enterprise-level frontend applications. Umi uses React and is based on a routing system that allows you to make fast and responsive applications.

In this book, we will build a frontend web application for a customer relationship management (CRM) system. Starting with your environment setup, I will introduce you to the main features of UmiJS and how a project is structured. After that, we will explore Ant Design, a design system with a vast library of React components for quickly building modern and responsive user interfaces that deeply integrate with Umi.

You will also learn an approach based on models and services to handle HTTP requests and responses and control an application's state in complex scenarios.

After learning to work with Umi, you will explore how to improve code quality by implementing a consistent code style and using formatting tools such as Prettier and EditorConfig. You will also learn how to design and implement tests for frontend applications.

Finally, you will host your CRM frontend application on AWS Amplify, an out-of-the-box platform for frontend developers to build full-stack applications using several AWS services.

Who this book is for

This book is for React developers who are new to UmiJS and building large web applications. I assume you already know React and the basics of designing web applications.

What this book covers

Chapter 1, Environment Setup and Introduction to UmiJS, is where you will install all the tools you need to follow the exercises in this book and learn the main features of UmiJS.

Chapter 2, Creating User Interfaces with Ant Design, is where you will explore the Ant Design system and create interfaces using its React components library.

Chapter 3, Using Models, Services, and Mocking Data, is where you will learn an approach based on models and services to handle requests, manage application state, and simulate data using mock files.

Chapter 4, Error Handling, Authentication, and Route Protection, is where you will implement error handling, security controls, and authorization on your application.

Chapter 5, Code Style and Formatting Tools, is where we will discuss code style and configure Prettier and EditorConfig to automatically format and enforce a consistent code style in your project.

Chapter 6, Testing Front-End Applications, is where we will discuss software testing and implement some tests for your application using Puppeteer.

Chapter 7, Single-Page Application Deployment, is where you will prepare your application for deployment and host it on AWS Amplify.

To get the most out of this book

To complete these book exercises, you only need a computer with a modern operating system (such as Windows 10/11, macOS 10.15, or Ubuntu 20.04). I will give you instructions on how to install the other required software in Chapter 1, Environment Setup and Introduction to UmiJS.

It's important to mention that you will need a free GitHub account to access the code examples and to complete Chapter 7, Single-Page Application Deployment.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs. If there's an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "In this example, we used the describe method to create a group for two tests related to math problems."

A block of code is set as follows:

export default {
  'home.recents': 'Recent opportunities',
  'greetings.hello': 'Hello',
  'greetings.welcome': 'welcome',
};

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

async function login(page: Page) {
  await page.goto('http://localhost:8000');
  await page.waitForNavigation();
  await page.type('#username', '[e-mail]');
  await page.type('#password', 'user');
  await page.click('#loginbtn');
}

Any command-line input or output is written as follows:

yarn add -D puppeteer

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "The Opportunities page allows users to browse and register a new sale opportunity."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share your thoughts

Once you've read Enterprise React Development with UmiJS, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.