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

Summary

In this chapter, we built a complete internationalization system for our application. We started by understanding why separating text from code makes translations manageable.

We organized translations using namespaces to keep files small and focused. App-level namespaces like common contain shared translations, while feature-scoped translations live alongside their feature code. This organization makes translations easy to find and maintain.

We set up react-i18next with both server and client initialization. The server renders pages with correct translations, and the client hydrates smoothly. We created an API endpoint for serving translations on demand, enabling partial bundling, which keeps the initial JavaScript bundle small.

Type safety catches translation errors early. By telling TypeScript about our translation structure, we get autocomplete and compile-time checking for translation keys. We also configure language and direction attributes so browsers, screen readers, and...

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