React application architecture for production : learn best practices and expert tips to deliver enterprise-ready react web apps / Alan Alickovic.

Format:

Book

Author/Creator:

Alickovic, Alan, author.

Language:

English

Subjects (All):

Application software--Development.

Application software.

Web services.

Physical Description:

1 online resource (230 pages)

Edition:

1st ed.

Place of Publication:

London, England : Packt Publishing, [2023]

Biography/History:

Alickovic Alan: Alan Alickovic is a software developer, mentor and open source enthusiast from Serbia. He has extensive experience in building scalable applications from startups to large organizations. Besides being an individual contributor he has also been leading teams and mentoring other developers. By the time of this writing, he is working as a senior software engineer at Vroom.

Summary:

A hands-on guide to help you develop skills and confidence in building and structuring React applications in a well-organized way using the best tools in the React ecosystem Key Features Discover solutions to complex problems faced while creating production-ready apps with React Develop scalable React applications with Next.js using a step-by-step approach from analysis to deployment Get an overview of the React ecosystem and identify the best tools to meet your app requirements Book Description Building large-scale applications in production can be overwhelming with the amount of tooling choices and lack of cohesive resources. To address these challenges, this hands-on guide covers best practices and web application development examples to help you build enterprise-ready applications with React in no time. Throughout the book, you'll work through a real-life practical example that demonstrates all the concepts covered. You'll learn to build modern frontend applications--built from scratch and ready for production. Starting with an overview of the React ecosystem, the book will guide you in identifying the tools available to solve complex development challenges. You'll then advance to building APIs, components, and pages to form a complete frontend app. The book will also share best practices for testing, securing, and packaging your app in a structured way before finally deploying your app with scalability in mind. By the end of the book, you'll be able to efficiently build production-ready applications by following industry practices and expert tips. What you will learn Use a good project structure that scales well with your application Create beautiful UIs with Chakra UI and emotion Configure a base Next.js app with static code analysis and Git hooks Learn to mock API endpoints for prototyping, local development and testing Choose an optimal rendering strategy in Next.js based on the page needs Learn to choose the best state management solution for given problem Write unit tests, integration tests and e2e tests in your React Application Deploy your React applications on Vercel Who this book is for This book is for intermediate-level web developers who already have a solid understanding of JavaScript, React, and web development in general and want to build large-scale React applications effectively. Beginner-level TypeScript experience, along with JavaScript and React, will be beneficial.

Contents:

Cover

Title Page

Copyright and Credits

Contributors

Table of Contents

Preface

Chapter 1: Understanding the Architecture of React Applications

Benefits of having a good application architecture

A good foundation for the project

Easier project management

Increased development speed and productivity

Cost-effectiveness

Better product quality

Exploring the architectural challenges of React applications

What are the challenges when building a React application?

Understanding architectural decisions when building React applications

Bad architectural decisions

Good architectural decisions

Planning our application

What are we building?

Application requirements

Data model overview

Exploring the technical decisions

Summary

Chapter 2: Setup and Project Structure Overview

Technical requirements

Next.js application overview

Why Next.js?

Next.js application structure

TypeScript setup overview and usage

Why TypeScript?

TypeScript setup

Basic TypeScript usage

ESLint setup overview

Prettier setup overview

Pre-committing checks setup overview

Project structure overview

Features

Chapter 3: Building and Documenting Components

Chakra UI

Chakra UI setup

Building components

Button

InputField

Link

Storybook

Storybook configuration

Storybook scripts

Documenting components

Button stories

Exercises

Chapter 4: Building and Configuring Pages

Next.js routing

Next.js rendering strategies

Client-side rendering

Server-side rendering

Next.js SEO

Layouts

Wrapping JSX of every page with the layout component

Attaching the layout to the page component and using it to wrap the entire component

Building the pages.

The public organization details page

The public job details page

The jobs page in the dashboard

The job details page in the dashboard

The create job page

404 page

Chapter 5: Mocking the API

Why is mocking useful?

Introduction to MSW

Configuration overview

Writing our first handler

Configuring data models

Configuring request handlers for API endpoints

API utils

Auth handlers

Jobs handlers

Organizations handlers

Chapter 6: Integrating the API into the Application

Configuring the API client

Configuring React Query

Why React Query?

Defining the API layer for the features

Jobs

Organizations

Consuming the API in the application

Public organization

Public job

Dashboard jobs

Dashboard job

Create job

Chapter 7: Implementing User Authentication and Global Notifications

Implementing the authentication system

Authentication system overview

Building authentication features

Protecting resources that require the user to be authenticated

Implementing notifications

Creating the store

Creating the UI

Integrating and using notifications

Chapter 8: Testing

Unit testing

Integration testing

Dashboard jobs page

Dashboard job page

Job creation page

Public organization page

Public job page

Login page

End-to-end testing

Dashboard flow

Public flow

Chapter 9: Configuring CI/CD for Testing and Deployment

What is CI/CD?

Using GitHub Actions

Workflows

Events

Actions

Runners

Configuring the pipeline for testing

Code checks job

End-to-end testing job.

Configuring the pipeline for deploying to Vercel

Having a Vercel account

Disabling GitHub integration for Vercel

Linking the project to Vercel

Providing environment variables to GitHub Actions

Creating the job that will deploy the application

Chapter 10: Going Beyond

Feature improvements

Jobs feature improvements

Organization improvements

Adding job applications

Filtering and paginating lists of data

Adding user registration

Technical improvements

Server-side rendering and caching

React Query hydration for SSR

Using query key factories

Code scaffolding

Validating form inputs and API responses with Zod

Next.js 13

Appendix

GraphQL

Monorepos

Micro frontend architecture

Index

Other Books You May Enjoy.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781801077408

1801077401

OCLC:

1354208606