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 . . . 32810. 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 . . . 37411. 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 . . . 41312. 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 . . . 44013. 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 . . . 46114. 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 . . . 49215. 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 . . . 55116. 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 . . . 58017. 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 . . . 60318. 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 . . . 62619. 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 . . . 65820. 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 . . . 68621. 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