Welcher Frontendentwickler hat noch nicht von React gehört? Diese ursprünglich von Facebook entwickelte JavaScript-Bibliothek hat innerhalb kurzer Zeit eine steile Karriere hingelegt. Sie bildet mittlerweile eine wichtige Grundlage für viele Unternehmensanwendungen, Single Page-Applikationen, sowie viele Apps für iPhone und Android.
Erfahren Sie in diesem umfassenden Handbuch des JavaScipt-Experten Sebastian Springer , wie Sie performante Oberflächen gestalten. 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. Dieses Buch ist ein Muss für jeden JavaScript-Entwickler und für jeden, der React lernen möchte!
- Grundlagen und Profiwissen, für Einsteiger und Fortgeschrittene
- Umgang mit Komponentenarchitektur und Virtual DOM
- Tests, Debugging, Material Design Components, Router, Animationen, i18n, Server Side Rendering u. v. m.
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
Tests, Debugging, Material Design Components, Router, i18n, Server Side Rendering u.v.m.
Autorentext
Sebastian Springer ist JavaScript-Engineer bei MaibornWolff. Als Dozent lehrt er JavaScript an der Technischen Hochschule Rosenheim. Er publiziert regelmäßig in Fachzeitschriften, schreibt Fachbücher zu Node.js und ist ein gefragter Speaker auf allen wichtigen JavaScript- und Webentwickler-Konferenzen. Sebastian Springer bietet auch Seminare zu JavaScript und Node.js an und ist Trainer für mehrere Rheinwerk Webinare.
Inhalt
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 .…