Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React Application Architecture for Production
  • Table Of Contents Toc
React Application Architecture for Production

React Application Architecture for Production - Second Edition

By : Alan Alickovic, Anthony Alicea
close
close
React Application Architecture for Production

React Application Architecture for Production

By: Alan Alickovic, Anthony Alicea

Overview of this book

Building production-grade React applications requires making dozens of architectural decisions, often with little cohesive guidance. This book teaches proven architectural patterns for building scalable, maintainable frontend apps, based on timeless principles and modern best practices. This updated edition features a modern stack: React Router in framework mode, TypeScript, TanStack Query, Zustand, React Hook Form, Zod, Shadcn UI, Vitest, and Playwright. It also adds new chapters on performance, accessibility, and internationalization. You’ll work through a real-world example that brings modern architecture concepts to life. Starting with architectural foundations, you’ll make informed decisions about project structure, enforce code quality, build a well-designed component library, and implement the right rendering strategies. From there, you’ll build robust API layers with types generated from an OpenAPI specification and implement the right state management strategies for each use case. You will also learn about different testing strategies and when to use them, how to secure the application, and how to make it performant so that it remains scalable and maintainable. By the end, you’ll be prepared to design and build scalable React apps from the ground up and lead technical decisions in real-world projects.
Table of Contents (17 chapters)
close
close
15
Other Books You May Enjoy
16
Index

Project structure overview

How we organize our files and folders has a huge impact on how easy it is to navigate and maintain our codebase. Let's explore different approaches and understand why we chose a feature-based structure for our application.

What is project structure and why does it matter?

When we're building a React application, we have to decide how to organize:

  • Components (reusable UI pieces)
  • Pages (full screens)
  • API calls (data fetching)
  • State management (application data)
  • Utilities (helper functions)
  • Tests (quality assurance)

The wrong structure can make our codebase hard to navigate, leading to:

  • Difficulty finding related code.
  • Unclear dependencies between different parts.
  • Harder code reviews.
  • Slower development as the project grows.

Different approaches to project structure

There are several common approaches to organizing React applications, each with their own trade-offs:

File-type structure:

src/
├── components/
├──...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
React Application Architecture for Production
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon