Creating Our App Structure

Welcome to Progressive Web Apps with React!

This book will take you through the entire process of building a React application that also functions as a Progressive Web App. We'll cover not only the "how" of constructing such an application, but also highlight best practices and how to measure your application to ensure successful implementation of PWA features.

Progressive Web Apps are poised to become the future of web applications. They promise a bevy of additional functionality, such as push notifications and the ability to be installed, which pushes them into the realm of native iOS or Android apps. Additionally, a strong focus on performance (taking advantage of cutting-edge web technology) means that PWAs create apps that are fast for everyone.

We'll cover each facet of PWAs in depth, as well as the process of converting a regular web application into a progressive one. We'll also dive deep into React best practices, using libraries such as React Router.

To check your code for this and future chapters, you can view the completed project at https://github.com/scottdomes/chatastrophe/. The repository includes branches for each chapter. Visit https://github.com/scottdomes/chatastrophe/tree/chapter1 for this chapter's final code.

In this chapter, we will get started with the basic structure of our application. Here's what we'll cover:

• The use cases of Progressive Web Apps
• The basic user stories we want our app to fulfill
• The project structure and basic HTML
• Installing dependencies
• Getting started with React

First, let's set the scene for our application's journey.