Tests, Debugging, Material Design Components, Router, i18n, Server Side Rendering u.v.m.

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 [...] ... 620

18.4 ... Zusammenfassung ... 626

19. Performance ... 629

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

19.2 ... Pure Components ... 632

19.3 ... [...] ... 634

19.4 ... '[...]' -- 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 ......