Large Scale Apps with React and TypeScript

Table of Contents....3

LARGE SCALE APPS WITH REACT AND TYPESCRIPT....8

Preface....10

Goal....11

Audience....11

Text Conventions....12

Thanks....12

About me....12

Prerequisites....13

Companion Code....14

Chapter 1 - Setting Up The Project....15

Create Project Wizard....15

Chapter 1 Recap....18

Chapter 2 - Your First Component....19

The Items List....19

ItemsList Component Requirements....19

ItemsList Component Code....20

Main App View....23

Chapter 2 Recap....27

Chapter 3 - Data Models and Interfaces....28

Models Directory....28

Interface ItemInterface....29

ItemsList Component....30

App View....32

Chapter 3 Recap....35

Chapter 4 - Adding Events To the Items Component....36

ItemsList Component....36

Chapter 4 Recap....44

Chapter 5 - Intro to Unit Testing While Refactoring a Bit....45

ItemComponent....45

ItemComponent Unit Tests....51

ItemsList component....57

Chapter 5 Recap....61

Chapter 6 - Introducing State Management....62

Store Interfaces....63

Store Implementation....67

App.tsx....73

Items.view.tsx....74

Back to the App.tsx file....76

Web Browser....77

ItemsList.component.tsx....77

Back to the Web Browser....78

Loader Component....78

Chapter 6 Recap....83

Chapter 7 - Api Client....84

API Client Overview....84

Domains....86

The Main ApiClient....86

Items domain Api Client....87

Mock and Live Api Clients....91

Environment Variables....97

Api Client Provider....99

Store Instance updates....101

Alternatives....104

Chapter 7 Recap....112

Chapter 8 - Enhance the Api Client....113

HttpClient Interfaces and Models....113

UrlUtils Unit Tests....130

HttpClient: Unit Tests....131

ItemsApiClientModel Update....135

Chapter 8 Recap....137

Chapter 9 - App Configuration....138

vite-env.d.ts updates (or env.d.ts)....138

.env files updates....139

Config Interface....140

Config files....141

tsconfig.json updates....145

Config files map....146

Config provider....147

Unit Tests....149

HttpClient code updates....153

Api Client code updates....154

Chapter 9 Recap....157

Chapter 10 - Localization and Internationalization - Language Localization....158

Plugins: i18next, react-i18next....158

Config updates....159

Translation JSON data....161

API Client updates....163

Updates to ApiClient.interface.ts....166

Updates to ApiClient instances....167

i18n initialization and useLocalization hook....169

main.tsx or index.tsx updates....175

App.tsx updates....175

Browser....177

Chapter 10 Recap....182

Chapter 11 - Localization and Internationalization - Number and DateTime Formatters....183

Directory localization/formatters....183

Chapter 11 Recap....197

Chapter 12 - Adding Tailwind CSS....198

Chapter 12 Recap....202

Chapter 13 - Intro to Primitives....203

Atomic Design and Similar Approaches....203

Conventions....203

General Strategies....204

Text Elements....205

Primitives View....207

Chapter 13 Recap....210

Chapter 14 - More Primitives....211

Button Elements....211

Primitives View - update....213

Toggle/Checkbox Elements....215

Primitives View - one more update....217

Chapter 14 Recap....221

Chapter 15 - A Primitive Modal....222

Icon: ElIconAlert....222

Interface ModalProps....224

File ElModal.ts (note: not .tsx)....224

File useModal.ts....231

Updates to Primitives.view.tsx....232

Browser....234

Chapter 15 Recap....237

Chapter 16 - Higher-level components....238

Item Component - updates....238

ItemsList Component - updates....243

Summary....244

Chapter 16 Recap....245

Chapter 17 - Creating Component Libraries....246

Create my-component-library....246

Chapter 17 Recap....255

Chapter 18 - Creating a JavaScript library....256

Create my-js-helpers....256

Chapter 18 Recap....265

Chapter 19 - Publish a library as a NPM package....266

Create an NPM user account....266

Create an Organization under your NPM profile....266

Update my-js-helpers package.json....267

Publishing the library....267

Consuming your NPM package....268

Chapter 19 Recap....269

(More Chapters Coming Soon)....270

Bonus Chapter - using create-react-app....271

Env Variables....273

Bonus Chapter - Vitest....275

Remove Jest dependencies and setup files....275

Add Vitest....276

Unit Tests updates....279

Naming Conventions....282

Coding Standards....282

Resources....286

Websites....286

Blogs....287

Books....288

This book is a guide for developers looking to build large-scale front-end applications with React and TypeScript. With the growth of the web and mobile app development, there is an increasing demand for robust, scalable, and maintainable front-end solutions. This book provides a comprehensive approach to building large scale code bases that use React and TypeScript.

The book covers key concepts and best practices like:

• Building front-ends that can grow to a large code base that is organized and easy to expand and maintain.
• Development of UI components in isolation using an API client that can easily serve live data or mocked data.
• Centralized State Manager organized into domain/area modules, providing a unified and consistent way to manage the application state.
• Internationalization and Localization for language translation and number/dates formatting according to a specific culture, making it easier to reach a global audience.
• TypeScript type-checking at development time to decrease run-time bugs or errors, reducing the risk of costly bugs and enhancing the overall quality of the code.
• Directory structure, file, and code naming conventions, ensuring a consistent and organized project structure for both developers and future maintainers.
• Hooks and Compositional Patterns, providing a flexible and reusable way to implement functionality in components.
• Components Libraries, allowing developers to build a library of reusable components, reducing development time and increasing code quality.
• Unit tests for models and components, ensuring code quality and reducing the risk of regressions.

The book is designed for developers with intermediate to advanced React and TypeScript skills who are looking to take their applications to the next level. Whether you are building a new large-scale app or optimizing an existing one, this book will provide you with the tools and knowledge to achieve your goals. Throughout the book, practical examples and real-world scenarios are used to illustrate key concepts and best practices, providing you with a solid understanding of how to build large scale apps with React and TypeScript.