React

Sebastian Springer ist als JavaScript Engineer bei MaibornWolff tätig. Neben der Entwicklung und Konzeption von Applikationen liegt sein Fokus auf der Vermittlung von Wissen. Als Dozent für JavaScript, Sprecher auf zahlreichen Konferenzen und Autor versucht er, die Begeisterung für professionelle Entwicklung mit JavaScript zu wecken.

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