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.

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

Materialien zum Buch ... 18Geleitwort des Fachgutachters ... 19Vorwort ... 211. Die ersten Schritte mit React ... 251.1 ... Was ist React? ... 251.2 ... Warum React? ... 321.3 ... Die wichtigsten Begriffe und Konzepte der React-Welt ... 331.4 ... Ein Blick in das React-Universum ... 401.5 ... Thinking in React ... 411.6 ... Codebeispiele ... 431.7 ... Zusammenfassung ... 442. Die ersten Schritte im Entwicklungsprozess ... 452.1 ... Schnellstart ... 452.2 ... Playgrounds für React ... 462.3 ... Lokale Entwicklung ... 502.4 ... Der Einstieg in die Entwicklung mit React ... 532.5 ... Die Struktur der Applikation ... 692.6 ... Fehlersuche in einer React-Applikation ... 702.7 ... Die Applikation bauen ... 732.8 ... Zusammenfassung ... 743. Die Grundlagen von React ... 753.1 ... Vorbereitung ... 753.2 ... Einstieg in die Applikation ... 763.3 ... Funktionskomponenten ... 803.4 ... JSX -- Strukturen in React definieren ... 883.5 ... Props -- Informationsfluss in einer Applikation ... 993.6 ... Lokaler State ... 1053.7 ... Event-Binding -- Reaktion auf Benutzerinteraktionen ... 1073.8 ... Immutability ... 1163.9 ... Zusammenfassung ... 1194. Ein Blick hinter die Kulissen -- weiterführende Themen ... 1214.1 ... Der Lebenszyklus einer Komponente ... 1214.2 ... Der Lebenszyklus einer Funktionskomponente mit dem Effect-Hook ... 1224.3 ... Serverkommunikation ... 1334.4 ... Container Components ... 1454.5 ... Higher-Order Components ... 1514.6 ... Render Props ... 1554.7 ... Kontext ... 1604.8 ... Fragments ... 1684.9 ... Zusammenfassung ... 1705. Klassenkomponenten ... 1715.1 ... Klassenkomponenten in React ... 1715.2 ... Grundlegende Struktur einer Klassenkomponente ... 1725.3 ... Props in einer Klassenkomponente ... 1735.4 ... State -- der Zustand der Klassenkomponente ... 1765.5 ... Der Komponenten-Lifecycle ... 1795.6 ... Error Boundaries ... 1915.7 ... Die Context-API in einer Klassenkomponente verwenden ... 1965.8 ... Unterschiede zwischen Funktions- und Klassenkomponenten ... 1985.9 ... Zusammenfassung ... 1986. Die Hooks-API von React ... 2016.1 ... Ein erster Überblick ... 2026.2 ... 'useReducer' -- der Reducer Hook ... 2046.3 ... 'useCallback' -- Memoisieren von Funktionen ... 2126.4 ... 'useMemo' -- Memoisieren von Objekten ... 2136.5 ... 'useRef' -- Referenzen und immutable Values ... 2156.6 ... 'useImperativeHandle' -- Steuerung von ForwardRefs ... 2186.7 ... 'useLayoutEffect' -- die synchrone Alternative zu useEffect ... 2216.8 ... 'useDebugValue' -- Debugging-Informationen in den React Developer Tools ... 2226.9 ... 'useDeferredValue' -- Updates nach Priorität durchführen ... 2236.10 ... 'useTransition' -- die Priorität von Operationen heruntersetzen ... 2266.11 ... 'useId' -- Eindeutige Identifier erzeugen ... 2286.12 ... Bibliotheks-Hooks ... 2296.13 ... Custom Hooks ... 2306.14 ... Rules of Hooks -- was Sie beachten sollten ... 2326.15 ... Umstieg auf Hooks ... 2346.16 ... Zusammenfassung ... 2357. Typsicherheit in React-Applikationen mit TypeScript ... 2377.1 ... Was bringt ein Typsystem? ... 2377.2 ... Die verschiedenen Typsysteme ... 2387.3 ... Typsicherheit in einer React-Applikation mit Flow ... 2397.4 ... TypeScript in einer React-Applikation einsetzen ... 2447.5 ... TypeScript und React ... 2507.6 ... Zusammenfassung ... 2638. Styling von React-Komponenten ... 2658.1 ... CSS-Import ... 2658.2 ... Inline-Styling ... 2748.3 ... CSS-Module ... 2778.4 ... CSS in JavaScript mit Emotion ... 2798.5 ... Tailwind ... 2888.6 ... Zusammenfassung ... 2919. Eine React-Applikation durch Tests absichern ... 2939.1 ... Die ersten Schritte mit Jest ... 2959.2 ... Testen von Hilfsfunktionen ... 3119.3 ... Snapshot-Testing ... 3139.4 ... Komponenten testen ... 3189.5 ... Umgang mit Serverabhängigkeiten ... 3239.6 ... Zusammenfassung ... 32810. Formulare in React ... 33110.1 ... Uncontrolled Components ... 33110.2 ... Controlled Components ... 34510.3 ... Der Upload von Dateien ... 35610.4 ... Formularvalidierung mit React Hook Form ... 36310.5 ... Zusammenfassung ... 37411. Komponentenbibliotheken in einer React-Applikation ... 37711.1 ... Installation und Integration von Material-UI ... 37711.2 ... Listendarstellung mit der 'Table'-Komponente ... 37911.3 ... Grids und Breakpoints ... 38911.4 ... Icons ... 39211.5 ... Datensätze löschen ... 39511.6 ... Neue Datensätze erzeugen ... 40111.7 ... Datensätze editieren ... 40811.8 ... Zusammenfassung ... 41312. Navigation innerhalb einer Applikation -- der Router ... 41512.1 ... Installation und Einbindung ... 41612.2 ... Navigation in der Applikation ... 41712.3 ... 'Not found' ... 42312.4 ... Testen des Routings ... 42512.5 ... Bedingte Umleitungen ... 43012.6 ... Dynamische Routen ... 43312.7 ... Zusammenfassung ... 44013. Eigene React-Bibliotheken erzeugen ... 44113.1 ... Eine eigene Komponentenbibliothek erzeugen ... 44113.2 ... Einbinden der Bibliothek ... 45113.3 ... Testen der Bibliothek ... 45413.4 ... Storybook ... 45813.5 ... Zusammenfassung ... 46114. Zentrales State-Management mit Redux ... 46314.1 ... Die Flux-Architektur ... 46414.2 ... Installation von Redux ... 46714.3 ... Den zentralen Store konfigurieren ... 46814.4 ... Der Umgang mit Änderungen am Store mit Reducern ... 47214.5 ... Komponenten und den Store verknüpfen ... 47614.6 ... Änderungen mit Actions beschreiben ... 48214.7 ... Datensätze erstellen und bearbeiten ... 48614.8 ... Zusammenfassung ... 49215. Umgang mit Asynchronität und Seiteneffekten in Redux ... 49515.1 ... Middleware in Redux ... 49515.2 ... Redux mit Redux Thunk ... 49715.3 ... Generators -- Redux Saga ... 51515.4 ... State-Management mit RxJS -- Redux Observable ... 53515.5 ... JWT zur Authentifizierung ... 54215.6 ... Zusammenfassung ... 55116. Serverkommunikation mit GraphQL und dem Apollo-Client ... 55316.1 ... Einführung in GraphQL ... 55316.2 ... Apollo, ein GraphQL-Client für React ... 55916.3 ... Die Apollo Client Devtools ... 57116.4 ... Lokales State-Management mit Apollo ... 57316.5 ... Authentifizierung ... 57816.6 ... Zusammenfassung ... 58017. Internationalisierung ... 58317.1 ... Einsatz von react-i18next ... 58417.2 ... Platzhalter verwenden ... 59317.3 ... Werte formatieren ... 59617.4 ... Singular und Plural ... 60017.5 ... Zusammenfassung ... 60318. Universal React Apps mit Server-Side Rendering ... 60518.1 ... Wie funktioniert Server-Side Rendering? ... 60618.2 ... Umsetzung von Server-Side Rendering ... 60718.3 ... Server-Side Rendering mit Next.js ... 62018.4 ... Zusammenfassung ... 62619. Performance ... 62919.1 ... Der Callback-Hook ... 63019.2 ... Pure Components ... 63219.3 ... React.memo ... 63419.4 ... 'React.lazy' -- Suspense for Code Splitting ... 63719.5 ... Suspense for Data Fetching ... 64519.6 ... Virtuelle Tabellen ... 65319.7 ... Zusammenfassung ... 65820. Progressive Web Apps ... 65920.1 ... Merkmale einer Progressive Web App ... 65920.2 ... Initialisieren der Applikation ... 66020.3 ... Installierbarkeit ... 66120.4 ... Offlinefähigkeit ... 67420.5 ... Werkzeuge für die Entwicklung ... 68520.6 ... Zusammenfassung ... 68621. Native Apps mit React Native ... 68921.1 ... Der Aufbau von React Native ... 68921.2 ... Die Installation von React Native ... 69021.3 ... Anzeige einer Übersichtsliste ... 69421.4 ... Debugging in der simulierten React-Native-Umgebung ... 70721.5 ... Bearbeiten von Datensätzen ... 71021.6 ... Publizieren ... 71721.7 ... Zusammenfassung ... 718Index ... 721