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