React

  Materialien zum Buch ... 18

  Geleitwort des Fachgutachters ... 19

  Vorwort ... 21

  1.  Die ersten Schritte mit React ... 25

       1.1 ... Was ist React? ... 25

       1.2 ... Warum React? ... 32

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

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

       1.5 ... Thinking in React ... 41

       1.6 ... Codebeispiele ... 43

       1.7 ... Zusammenfassung ... 44

  2.  Die ersten Schritte im Entwicklungsprozess ... 45

       2.1 ... Schnellstart ... 45

       2.2 ... Playgrounds für React ... 46

       2.3 ... Lokale Entwicklung ... 50

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

       2.5 ... Die Struktur der Applikation ... 69

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

       2.7 ... Die Applikation bauen ... 73

       2.8 ... Zusammenfassung ... 74

  3.  Die Grundlagen von React ... 75

       3.1 ... Vorbereitung ... 75

       3.2 ... Einstieg in die Applikation ... 76

       3.3 ... Funktionskomponenten ... 80

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

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

       3.6 ... Lokaler State ... 105

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

       3.8 ... Immutability ... 116

       3.9 ... Zusammenfassung ... 119

  4.  Ein Blick hinter die Kulissen -- weiterführende Themen ... 121

       4.1 ... Der Lebenszyklus einer Komponente ... 121

       4.2 ... Der Lebenszyklus einer Funktionskomponente mit dem Effect-Hook ... 122

       4.3 ... Serverkommunikation ... 133

       4.4 ... Container Components ... 145

       4.5 ... Higher-Order Components ... 151

       4.6 ... Render Props ... 155

       4.7 ... Kontext ... 160

       4.8 ... Fragments ... 168

       4.9 ... Zusammenfassung ... 170

  5.  Klassenkomponenten ... 171

       5.1 ... Klassenkomponenten in React ... 171

       5.2 ... Grundlegende Struktur einer Klassenkomponente ... 172

       5.3 ... Props in einer Klassenkomponente ... 173

       5.4 ... State -- der Zustand der Klassenkomponente ... 176

       5.5 ... Der Komponenten-Lifecycle ... 179

       5.6 ... Error Boundaries ... 191

       5.7 ... Die Context-API in einer Klassenkomponente verwenden ... 196

       5.8 ... Unterschiede zwischen Funktions- und Klassenkomponenten ... 198

       5.9 ... Zusammenfassung ... 198

  6.  Die Hooks-API von React ... 201

       6.1 ... Ein erster Überblick ... 202

       6.2 ... »useReducer« -- der Reducer Hook ... 204

       6.3 ... »useCallback« -- Memoisieren von Funktionen ... 212

       6.4 ... »useMemo« -- Memoisieren von Objekten ... 213

       6.5 ... »useRef« -- Referenzen und immutable Values ... 215

       6.6 ... »useImperativeHandle« -- Steuerung von ForwardRefs ... 218

       6.7 ... »useLayoutEffect« -- die synchrone Alternative zu useEffect ... 221

       6.8 ... »useDebugValue« -- Debugging-Informationen in den React Developer Tools ... 222

       6.9 ... »useDeferredValue« -- Updates nach Priorität durchführen ... 223

       6.10 ... »useTransition« -- die Priorität von Operationen heruntersetzen ... 226

       6.11 ... »useId« -- Eindeutige Identifier erzeugen ... 228

       6.12 ... Bibliotheks-Hooks ... 229

       6.13 ... Custom Hooks ... 230

       6.14 ... Rules of Hooks -- was Sie beachten sollten ... 232

       6.15 ... Umstieg auf Hooks ... 234

       6.16 ... Zusammenfassung ... 235

  7.  Typsicherheit in React-Applikationen mit TypeScript ... 237

       7.1 ... Was bringt ein Typsystem? ... 237

       7.2 ... Die verschiedenen Typsysteme ... 238

       7.3 ... Typsicherheit in einer React-Applikation mit Flow ... 239

       7.4 ... TypeScript in einer React-Applikation einsetzen ... 244

       7.5 ... TypeScript und React ... 250

       7.6 ... Zusammenfassung ... 263

  8.  Styling von React-Komponenten ... 265

       8.1 ... CSS-Import ... 265

       8.2 ... Inline-Styling ... 274

       8.3 ... CSS-Module ... 277

       8.4 ... CSS in JavaScript mit Emotion ... 279

       8.5 ... Tailwind ... 288

       8.6 ... Zusammenfassung ... 291

  9.  Eine React-Applikation durch Tests absichern ... 293

       9.1 ... Die ersten Schritte mit Jest ... 295

       9.2 ... Testen von Hilfsfunktionen ... 311

       9.3 ... Snapshot-Testing ... 313

       9.4 ... Komponenten testen ... 318

       9.5 ... Umgang mit Serverabhängigkeiten ... 323

       9.6 ... Zusammenfassung ... 328

10.  Formulare in React ... 331

       10.1 ... Uncontrolled Components ... 331

       10.2 ... Controlled Components ... 345

       10.3 ... Der Upload von Dateien ... 356

       10.4 ... Formularvalidierung mit React Hook Form ... 363

       10.5 ... Zusammenfassung ... 374

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

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

       11.2 ... Listendarstellung mit der »Table«-Komponente ... 379

       11.3 ... Grids und Breakpoints ... 389

       11.4 ... Icons ... 392

       11.5 ... Datensätze löschen ... 395

       11.6 ... Neue Datensätze erzeugen ... 401

       11.7 ... Datensätze editieren ... 408

       11.8 ... Zusammenfassung ... 413

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

       12.1 ... Installation und Einbindung ... 416

       12.2 ... Navigation in der Applikation ... 417

       12.3 ... »Not found« ... 423

       12.4 ... Testen des Routings ... 425

       12.5 ... Bedingte Umleitungen ... 430

       12.6 ... Dynamische Routen ... 433

       12.7 ... Zusammenfassung ... 440

13.  Eigene React-Bibliotheken erzeugen ... 441

       13.1 ... Eine eigene Komponentenbibliothek erzeugen ... 441

       13.2 ... Einbinden der Bibliothek ... 451

       13.3 ... Testen der Bibliothek ... 454

       13.4 ... Storybook ... 458

       13.5 ... Zusammenfassung ... 461

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

       14.1 ... Die Flux-Architektur ... 464

       14.2 ... Installation von Redux ... 467

       14.3 ... Den zentralen Store konfigurieren ... 468

       14.4 ... Der Umgang mit Änderungen am Store mit Reducern ... 472

       14.5 ... Komponenten und den Store verknüpfen ... 476

       14.6 ... Änderungen mit Actions beschreiben ... 482

       14.7 ... Datensätze erstellen und bearbeiten ... 486

       14.8 ... Zusammenfassung ... 492

15.  Umgang mit Asynchronität und Seiteneffekten in Redux ... 495

       15.1 ... Middleware in Redux ... 495

       15.2 ... Redux mit Redux Thunk ... 497

       15.3 ... Generators -- Redux Saga ... 515

       15.4 ... State-Management mit RxJS -- Redux Observable ... 535

       15.5 ... JWT zur Authentifizierung ... 542

       15.6 ... Zusammenfassung ... 551

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

       16.1 ... Einführung in GraphQL ... 553

       16.2 ... Apollo, ein GraphQL-Client für React ... 559

       16.3 ... Die Apollo Client Devtools ... 571

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

       16.5 ... Authentifizierung ... 578

       16.6 ... Zusammenfassung ... 580

17.  Internationalisierung ... 583

       17.1 ... Einsatz von react-i18next ... 584

       17.2 ... Platzhalter verwenden ... 593

       17.3 ... Werte formatieren ... 596

       17.4 ... Singular und Plural ... 600

       17.5 ... Zusammenfassung ... 603

18.  Universal React Apps mit Server-Side Rendering ... 605

       18.1 ... Wie funktioniert Server-Side Rendering? ... 606

       18.2 ... Umsetzung von Server-Side Rendering ... 607

       18.3 ... Server-Side Rendering mit Next.js ... 620

       18.4 ... Zusammenfassung ... 626

19.  Performance ... 629

       19.1 ... Der Callback-Hook ... 630

       19.2 ... Pure Components ... 632

       19.3 ... React.memo ... 634

       19.4 ... »React.lazy« -- Suspense for Code Splitting ... 637

       19.5 ... Suspense for Data Fetching ... 645

       19.6 ... Virtuelle Tabellen ... 653

       19.7 ... Zusammenfassung ... 658

20.  Progressive Web Apps ... 659

       20.1 ... Merkmale einer Progressive Web App ... 659

       20.2 ... Initialisieren der Applikation ... 660

       20.3 ... Installierbarkeit ... 661

       20.4 ... Offlinefähigkeit ... 674

       20.5 ... Werkzeuge für die Entwicklung ... 685

       20.6 ... Zusammenfassung ... 686

21.  Native Apps mit React Native ... 689

       21.1 ... Der Aufbau von React Native ... 689

       21.2 ... Die Installation von React Native ... 690

       21.3 ... Anzeige einer Übersichtsliste ... 694

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

       21.5 ... Bearbeiten von Datensätzen ... 710

       21.6 ... Publizieren ... 717

       21.7 ... Zusammenfassung ... 718

  Index ... 721