React

Erfahren Sie in diesem umfassenden Handbuch des JavaScipt-Experten Sebastian Springer, wie Sie performante Oberflächen gestalten können. Mit einfachen und leicht verständlichen Beispielen erlernen Sie die Grundlagen von React, React Native und Redux. Und auch als fortgeschrittener JavaScript-Entwickler profitieren Sie von den vielen Profithemen wie Tests, Animationen, Material Design Components, Server-Side Renderung über Debugging bis hin zur Entwicklung von vollständigen mobilen Anwendungen.

Aus dem Inhalt:

• Erste Schritte mit React
• Typsicherheit in React mit TypeScript
• Styling von Komponenten
• Absicherung durch automatisierte Tests
• Interaktion über Formulare
• Animationen
• Material Design Components
• Arbeit mit dem React Router
• Zentrales Statemanagement mit Redux
• Asynchronität und Seiteneffekte in Redux
• Internationalisierung, Server Side Rendering
• Serverkommunikation mit GraphQL und dem Apollo Client

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