Dirty Devil

Build Large and Scalable front-ends that leverage component isolation, a centralized state manager, internationalization, localization, Custom Component Libraries, API-client code that easily can switch between mocked data and live data and more. 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