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