Preface #

Why React, Vite and what we mean by "large scale apps" in this book.

React is a popular JavaScript library for building user interfaces. It offers several benefits for developers, such as:

• Declarative code structure: React uses a declarative syntax, making it easier for developers to understand how the UI should react to changes in data.

• Reusable components: React's component-based architecture allows for building reusable UI components, making it easier to maintain and scale the codebase.

• Virtual DOM: React uses a virtual DOM, which optimizes updates and rendering, resulting in improved performance compared to directly manipulating the actual DOM.

• Server-side rendering: React allows for server-side rendering, improving the initial load time and making it easier to optimize search engine optimization (SEO).

• Large community: React has a large and active community, which means developers have access to a wealth of resources, including tutorials, libraries, and support.

Vite is a modern build tool for JavaScript projects that aims to provide fast and efficient builds. It offers several benefits, including:

• Faster build times and development experience compared to traditional bundlers.
• Lower initial load times, as only the essential code is loaded
• Improved build size, as Vite only includes the necessary code
• Lightweight and optimized for modern web development.

When we refer to "large scale apps", we mean applications that have a large code base, a large number of users, and a wide range of functionality. These applications typically require efficient and scalable code that can handle high traffic and large amounts of data.

In this kind of projects there are several common concerns that arise, such as:

• Code maintenance and scalability
• Code quality and performance
• Code organization and structure

To address these concerns, here we will outline best practices for code organization and structure, such as using a centralized state manager and implementing strong-type checking with TypeScript. Additionally, we will focus on writing unit tests for our models and components, which will help improve code quality and catch bugs early in the development process.

Our ultimate goal is to build a foundation that can handle the demands of our app and be easy to expand and maintain as the code base grows.

Goal #

The primary aim of this book is to guide you through the process of building a scalable React application by following best practices for project structure, file organization, naming conventions, state management, type checking with TypeScript, and compositional approaches using hooks.

Throughout the chapters, we will grow our simple project into a robust, large-scale application that is easy to expand and maintain, showcasing how patterns, conventions, and strategies can lay a solid foundation and keep the code organized and uncluttered.

We will build a TypeScript API client that can seamlessly switch between serving static mock data and communicating with a live API, allowing for front-end development to commence even before the back-end API is fully functional. Additionally, we will delve into topics such as internationalization, localization, and advanced techniques, to round out our comprehensive guide to building a scalable React application.

IMPORTANT: We will initially write code that allows us to achieve the desired functionality quickly, even if it requires more code, but then we constantly "rework" it (refactoring) to improve it and find solutions that allow us to reduce the amount of code used, or to organize it in a clear and easy way that is easy to expand and maintain. So arm yourself with a lot of patience!

Audience #

The audience for this book is from beginners with some experience in MV* applications, to intermediate developers. The format is similar to a cookbook, but instead of individual recipes we'll go through creating a project and keep enhancing, refactoring, and make it better as we move forward to more advanced chapters to show different patterns, architectures, and technologies.

Note: Some of the patterns illustrated here are not specific to React^[1], but can applied in any application written in TypeScript or JavaScript. For example, most code from Chapters 3, 7, 9 can also be used in Vue.js/Svelte/Angular or other front-end frameworks, and even be used in NodeJS apps.

Text Conventions #

I will highlight most terms or names in bold, rather than define different fonts/styles depending on whether a term is code, or a directory name or something else.

Thanks #

I would like to thank my son for helping me proof read and validate the steps in each chapter by building the same project. I also would like to thank all the developers that over the time helped me correct things in the book and provided valuable feedback.

About me #

I have worked as a software developer for more than 20 years. I switched career from being a full time musician when I was 30 years-old and then became a graphic designer, then transition to a web designer when internet became "a thing", and for many years after that worked as full-stack developer using Microsoft .NET, JavaScript, Node.js and many other technologies. You can read more about me on my personal website https://www.damianofusco.com and LinkedIn profile https://www.linkedin.com/in/damianofusco/. You will find me also on Twitter, @damianome, and GitHub github.com/damianof