Materialien zum Buch ... 19

Geleitwort des Fachgutachters ... 21

Vorwort ... 23

1. Die ersten Schritte mit React ... 27

1.1 ... Was ist React? ... 27

1.2 ... Warum React? ... 35

1.3 ... Die wichtigsten Begriffe und Konzepte der React-Welt ... 37

1.4 ... Ein Blick in das React-Universum ... 44

1.5 ... Thinking in React ... 46

1.6 ... Codebeispiele ... 47

1.7 ... Zusammenfassung ... 48

2. Die ersten Schritte im Entwicklungsprozess ... 49

2.1 ... Schnellstart ... 49

2.2 ... Playgrounds f r React ... 51

2.3 ... Lokale Entwicklung ... 54

2.4 ... Der Einstieg in die Entwicklung mit React ... 58

2.5 ... Die Struktur der Applikation ... 73

2.6 ... Fehlersuche in einer React-Applikation ... 74

2.7 ... Die Applikation bauen ... 77

2.8 ... Zusammenfassung ... 78

3. Die Grundlagen von React ... 79

3.1 ... Vorbereitung ... 79

3.2 ... Einstieg in die Applikation ... 80

3.3 ... Funktionskomponenten ... 84

3.4 ... JSX -- Strukturen in React definieren ... 92

3.5 ... Props -- Informationsfluss in einer Applikation ... 103

3.6 ... Lokaler State ... 109

3.7 ... Event-Binding -- Reaktion auf Benutzerinteraktionen ... 111

3.8 ... Immutability ... 121

3.9 ... Zusammenfassung ... 125

4. Typsicherheit in React-Applikationen mit TypeScript ... 127

4.1 ... Was bringt ein Typsystem? ... 127

4.2 ... Die verschiedenen Typsysteme ... 128

4.3 ... TypeScript in einer React-Applikation einsetzen ... 129

4.4 ... TypeScript und React ... 134

4.5 ... Zusammenfassung ... 143

5. Ein Blick hinter die Kulissen -- weiterf hrende Themen ... 145

5.1 ... Der Lebenszyklus einer Komponente ... 145

5.2 ... Der Lebenszyklus einer Funktionskomponente mit dem Effect-Hook ... 146

5.3 ... Serverkommunikation ... 158

5.4 ... Container Components ... 167

5.5 ... Higher-Order Components ... 172

5.6 ... Render Props ... 178

5.7 ... Kontext ... 184

5.8 ... Fragments ... 192

5.9 ... Zusammenfassung ... 194

6. Serverkommunikation mit React ... 195

6.1 ... Trennen von Komponente und Kommunikation ... 197

6.2 ... Bibliotheken f r die Serverkommunikation ... 206

6.3 ... Validierung der Serverdaten mit Zod ... 207

6.4 ... Daten mit TanStack Query vom Server laden ... 209

6.5 ... Zusammenfassung ... 219

7. Formulare in React ... 221

7.1 ... Uncontrolled Components ... 221

7.2 ... Controlled Components ... 234

7.3 ... Der Upload von Dateien ... 240

7.4 ... Formularhandling mit React Hook Form ... 247

7.5 ... Zusammenfassung ... 258

8. Die Hooks-API von React ... 259

8.1 ... Ein erster berblick ... 260

8.2 ... useReducer -- der Reducer Hook ... 263

8.3 ... useCallback -- Memoisieren von Funktionen ... 271

8.4 ... useMemo -- Memoisieren von Objekten ... 273

8.5 ... useRef -- Referenzen und immutable Values ... 275

8.6 ... useImperativeHandle -- Steuerung von ForwardRefs ... 277

8.7 ... useLayoutEffect -- die synchrone Alternative zu useEffect ... 281

8.8 ... useDebugValue -- Debugging-Informationen in den React Developer Tools ... 282

8.9 ... useDeferredValue -- Updates nach Priorit t durchf hren ... 283

8.10 ... useTransition -- die Priorit t von Operationen heruntersetzen ... 287

8.11 ... useId -- eindeutige Identifier erzeugen ... 289

8.12 ... useEffectEvent -- stabile Callbacks f r Effekte und Event-Logik ... 290

8.13 ... useOptimistic -- optimistische Updates ohne komplexes State-Management ... 292

8.14 ... Bibliotheks-Hooks ... 295

8.15 ... Custom Hooks ... 296

8.16 ... Rules of Hooks -- was Sie beachten sollten ... 298

8.17 ... Zusammenfassung ... 300

9. Styling von React-Komponenten ... 301

9.1 ... CSS-Import ... 301

9.2 ... Inline-Styling ... 311

9.3 ... CSS-Module ... 313

9.4 ... CSS in JavaScript mit Emotion ... 316

9.5 ... Tailwind ... 325

9.6 ... Zusammenfassung ... 327

10. Eine React-Applikation durch Tests absichern ... 329

10.1 ... Die ersten Schritte mit Vitest ... 331

10.2 ... Testen von Hilfsfunktionen ... 347

10.3 ... Snapshot-Testing ... 348

10.4 ... Komponenten testen ... 353

10.5 ... Umgang mit Serverabh ngigkeiten ... 361

10.6 ... Ende-zu-Ende-Tests ... 366

10.7 ... Zusammenfassung ... 368

11. Komponentenbibliotheken in einer React-Applikation ... 369

11.1 ... Installation und Integration von Material-UI ... 369

11.2 ... Listendarstellung mit der Table -Komponente ... 371

11.3 ... Grids und Breakpoints ... 376

11.4 ... Icons ... 378

11.5 ... Einen Best tigungsdialog implementieren ... 381

11.6 ... Formulare mit Material-UI ... 386

11.7 ... shadcn/ui als Alternative zu Material-UI ... 390

11.8 ... Zusammenfassung ... 392

12. Navigation innerhalb einer Applikation -- der Router ... 393

12.1 ... Installation und Einbindung ... 394

12.2 ... Navigation in der Applikation ... 396

12.3 ... Not found ... 402

12.4 ... Testen des Routings ... 404

12.5 ... Bedingte Umleitungen ... 408

12.6 ... Dynamische Routen ... 411

12.7 ... Imperative Navigation ... 413

12.8 ... Routing mit dem TanStack Router ... 414

12.9 ... Zusammenfassung ... 421

13. Eigene React-Bibliotheken erzeugen ... 423

13.1 ... Eine eigene Komponentenbibliothek erzeugen ... 423

13.2 ... Einbinden der Bibliothek ... 431

13.3 ... Testen der Bibliothek ... 433

13.4 ... Storybook ... 436

13.5 ... Zusammenfassung ... 439

14. Zentrales State-Management mit Redux ... 441

14.1 ... Die Flux-Architektur ... 442

14.2 ... Installation von Redux ... 445

14.3 ... Den zentralen Store konfigurieren ... 446

14.4 ... Der Umgang mit nderungen am Store mit Reducern ... 449

14.5 ... Komponenten und den Store verkn pfen ... 453

14.6 ... nderungen mit Actions beschreiben ... 457

14.7 ... Datens tze erstellen und bearbeiten ... 461

14.8 ... Zusammenfassung ... 466

15. Umgang mit Asynchronit t und Seiteneffekten in Redux ... 469

15.1 ... Middleware in Redux ... 469

15.2 ... Redux mit Redux Thunk ... 471

15.3 ... Zusammenfassung ... 488

16. Serverkommunikation mit GraphQL und dem Apollo-Client ... 491

16.1 ... Einf hrung in GraphQL ... 491

16.2 ... Apollo, ein GraphQL-Client f r React ... 497

16.3 ... Die Apollo Client Devtools ... 505

16.4 ... Lokales State-Management mit Apollo ... 506

16.5 ... Zusammenfassung ... 511

17. Internationalisierung ... 513

17.1 ... Einsatz von react-i18next ... 514

17.2 ... Platzhalter verwenden ... 522

17.3 ... Werte formatieren ... 525

17.4 ... Singular und Plural ... 529

17.5 ... Zusammenfassung ... 532

18. Performance ... 533

18.1 ... Der Callback-Hook ... 533

18.2 ... [...] ... 537

18.3 ... Der React Compiler ... 540

18.4 ... Rules of React ... 543

18.5 ... [...] -- Suspense for Code Splitting ... 544

18.6 ... Suspense for Data Fetching ... 552

18.7 ... Virtuelle Tabellen ... 553

18.8 ... Zusammenfassung ... 558

19. Authentifizierung in einer React-Applikation ... 561

19.1 ... Grundlagen tokenbasierter Authentifizierung ... 562

19.2 ... Authentifizierungs-State und Token-Handling in React ... 564

19.3 ... Gesch tzte Ressourcen und Requests ... 569

19.4 ... Arbeiten mit Rollen ... 573

19.5 ... Zusammenfassung ... 575

20. Progressive Web Apps ... 577

20.1 ... Merkmale einer Progressive Web App ... 577

20.2 ... Initialisieren der Applikation ... 578

20.3 ... Installierbarkeit ... 580

20.4 ... Offlinef higkeit ... 590

20.5 ... Zusammenfassung ... 602

21. Native Apps mit React Native ... 605

21.1 ... Der Aufbau von React Native ... 605

21.2 ... Die Installation von React Native ... 606

21.3 ... Anzeige einer bersichtsliste ... 610

21.4 ... Debugging in der simulierten React-Native-Umgebung ... 624

21.5 ... Bearbeiten von Datens tzen ... 625

21.6 ... Publizieren ... 633

21.7 ... Zusammenfassung ... 635

22. [...] -- Fullstack-React -- Grundlagen ... 637

22.1 ... [...] -- die Hintergr nde ... 638

22.2 ... Installation ... 638

22.3 ... Die Struktur einer [...]-Applikation ... 641

22.4 ... React Server Components ... 643

22.5 ... Statisches vs. dynamisches Rendern ... 648

22.6 ... Statische Generierung ... 651

22.7 ... Der App Router ... 652

22.8 ... Proxy ... 672

22.9 ... Zusammenfassung ... 673

23. Verbesserung der User-Experience mit [...] ... 675

23.1 ... Client Components in [...] ... 675

23.2 ... Arbeiten mit Suchparametern ... 680

23.3 ... [...] -- Ladezust nde abbilden ... 685

23.4 ... [...] -- Fehler abfangen ... 688

23.5 ... [...] -- Anzeige bei fehlenden Daten ... 692

23.6 ... Caching in einer [...]-Applikation ... 694

23.7 ... Revalidierung...