React
Description
Welcher Frontend-Entwickler hat noch nicht von React gehört? Die führende JavaScript-Bibliothek für moderne Benutzeroberflächen ist heute aus der Webentwicklung nicht mehr wegzudenken - ob für zahlreiche Single-Page-Applikationen in Unternehmen, öffentliche Webseiten oder mobile Apps auf iOS und Android.
Erfahren Sie in diesem umfassenden Handbuch des JavaScript-Experten Sebastian Springer , wie Sie moderne und performante Oberflächen mit React entwickeln. Durch klar strukturierte und leicht verständliche Beispiele erlernen Sie die Grundlagen von React, Next.js, React Native und Redux . Auch als fortgeschrittener JavaScript-Entwickler profitieren Sie von zahlreichen Praxis- und Profithemen - von Testing, Styling und Performance-Optimierung über Validierung und Debugging bis hin zu Fullstack- und mobilen Anwendungen. Dieses Buch ist ein Muss für alle JavaScript-Entwicklerinnen und -Entwickler und für alle, die React professionell einsetzen möchten!
- Grundlagen und Profiwissen, für Einsteiger und Fortgeschrittene
- Komponentenarchitektur, Hooks, State-Management und Formulargestaltung
- Testing, Performance, Routing, Server-Side Rendering mit Next.js, React Native, KI-Applikationen 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 und Validierung
- Zentrales State-Management und Alternativen zu Redux
- Asynchronität und Serverkommunikation mit TanStack Query
- Routing und Navigation in React-Applikationen
- Performance-Optimierung
- Server-Side Rendering und Fullstack-React mit Next.js
- Serverkommunikation mit GraphQL und dem Apollo Client
More details
Other editions
Previous edition
Person
ISNI:
Content
Materialien zum Buch ... 19
Geleitwort des Fachgutachters ... 21
Vorwort ... 23
1. Die ersten Schritte mit React ... 27
1.1 ... Was ist React? ... 27
1.2 ... Warum React? ... 35
1.3 ... Die wichtigsten Begriffe und Konzepte der React-Welt ... 37
1.4 ... Ein Blick in das React-Universum ... 44
1.5 ... Thinking in React ... 46
1.6 ... Codebeispiele ... 47
1.7 ... Zusammenfassung ... 48
2. Die ersten Schritte im Entwicklungsprozess ... 49
2.1 ... Schnellstart ... 49
2.2 ... Playgrounds f r React ... 51
2.3 ... Lokale Entwicklung ... 54
2.4 ... Der Einstieg in die Entwicklung mit React ... 58
2.5 ... Die Struktur der Applikation ... 73
2.6 ... Fehlersuche in einer React-Applikation ... 74
2.7 ... Die Applikation bauen ... 77
2.8 ... Zusammenfassung ... 78
3. Die Grundlagen von React ... 79
3.1 ... Vorbereitung ... 79
3.2 ... Einstieg in die Applikation ... 80
3.3 ... Funktionskomponenten ... 84
3.4 ... JSX -- Strukturen in React definieren ... 92
3.5 ... Props -- Informationsfluss in einer Applikation ... 103
3.6 ... Lokaler State ... 109
3.7 ... Event-Binding -- Reaktion auf Benutzerinteraktionen ... 111
3.8 ... Immutability ... 121
3.9 ... Zusammenfassung ... 125
4. Typsicherheit in React-Applikationen mit TypeScript ... 127
4.1 ... Was bringt ein Typsystem? ... 127
4.2 ... Die verschiedenen Typsysteme ... 128
4.3 ... TypeScript in einer React-Applikation einsetzen ... 129
4.4 ... TypeScript und React ... 134
4.5 ... Zusammenfassung ... 143
5. Ein Blick hinter die Kulissen -- weiterf hrende Themen ... 145
5.1 ... Der Lebenszyklus einer Komponente ... 145
5.2 ... Der Lebenszyklus einer Funktionskomponente mit dem Effect-Hook ... 146
5.3 ... Serverkommunikation ... 158
5.4 ... Container Components ... 167
5.5 ... Higher-Order Components ... 172
5.6 ... Render Props ... 178
5.7 ... Kontext ... 184
5.8 ... Fragments ... 192
5.9 ... Zusammenfassung ... 194
6. Serverkommunikation mit React ... 195
6.1 ... Trennen von Komponente und Kommunikation ... 197
6.2 ... Bibliotheken f r die Serverkommunikation ... 206
6.3 ... Validierung der Serverdaten mit Zod ... 207
6.4 ... Daten mit TanStack Query vom Server laden ... 209
6.5 ... Zusammenfassung ... 219
7. Formulare in React ... 221
7.1 ... Uncontrolled Components ... 221
7.2 ... Controlled Components ... 234
7.3 ... Der Upload von Dateien ... 240
7.4 ... Formularhandling mit React Hook Form ... 247
7.5 ... Zusammenfassung ... 258
8. Die Hooks-API von React ... 259
8.1 ... Ein erster berblick ... 260
8.2 ... useReducer -- der Reducer Hook ... 263
8.3 ... useCallback -- Memoisieren von Funktionen ... 271
8.4 ... useMemo -- Memoisieren von Objekten ... 273
8.5 ... useRef -- Referenzen und immutable Values ... 275
8.6 ... useImperativeHandle -- Steuerung von ForwardRefs ... 277
8.7 ... useLayoutEffect -- die synchrone Alternative zu useEffect ... 281
8.8 ... useDebugValue -- Debugging-Informationen in den React Developer Tools ... 282
8.9 ... useDeferredValue -- Updates nach Priorit t durchf hren ... 283
8.10 ... useTransition -- die Priorit t von Operationen heruntersetzen ... 287
8.11 ... useId -- eindeutige Identifier erzeugen ... 289
8.12 ... useEffectEvent -- stabile Callbacks f r Effekte und Event-Logik ... 290
8.13 ... useOptimistic -- optimistische Updates ohne komplexes State-Management ... 292
8.14 ... Bibliotheks-Hooks ... 295
8.15 ... Custom Hooks ... 296
8.16 ... Rules of Hooks -- was Sie beachten sollten ... 298
8.17 ... Zusammenfassung ... 300
9. Styling von React-Komponenten ... 301
9.1 ... CSS-Import ... 301
9.2 ... Inline-Styling ... 311
9.3 ... CSS-Module ... 313
9.4 ... CSS in JavaScript mit Emotion ... 316
9.5 ... Tailwind ... 325
9.6 ... Zusammenfassung ... 327
10. Eine React-Applikation durch Tests absichern ... 329
10.1 ... Die ersten Schritte mit Vitest ... 331
10.2 ... Testen von Hilfsfunktionen ... 347
10.3 ... Snapshot-Testing ... 348
10.4 ... Komponenten testen ... 353
10.5 ... Umgang mit Serverabh ngigkeiten ... 361
10.6 ... Ende-zu-Ende-Tests ... 366
10.7 ... Zusammenfassung ... 368
11. Komponentenbibliotheken in einer React-Applikation ... 369
11.1 ... Installation und Integration von Material-UI ... 369
11.2 ... Listendarstellung mit der Table -Komponente ... 371
11.3 ... Grids und Breakpoints ... 376
11.4 ... Icons ... 378
11.5 ... Einen Best tigungsdialog implementieren ... 381
11.6 ... Formulare mit Material-UI ... 386
11.7 ... shadcn/ui als Alternative zu Material-UI ... 390
11.8 ... Zusammenfassung ... 392
12. Navigation innerhalb einer Applikation -- der Router ... 393
12.1 ... Installation und Einbindung ... 394
12.2 ... Navigation in der Applikation ... 396
12.3 ... Not found ... 402
12.4 ... Testen des Routings ... 404
12.5 ... Bedingte Umleitungen ... 408
12.6 ... Dynamische Routen ... 411
12.7 ... Imperative Navigation ... 413
12.8 ... Routing mit dem TanStack Router ... 414
12.9 ... Zusammenfassung ... 421
13. Eigene React-Bibliotheken erzeugen ... 423
13.1 ... Eine eigene Komponentenbibliothek erzeugen ... 423
13.2 ... Einbinden der Bibliothek ... 431
13.3 ... Testen der Bibliothek ... 433
13.4 ... Storybook ... 436
13.5 ... Zusammenfassung ... 439
14. Zentrales State-Management mit Redux ... 441
14.1 ... Die Flux-Architektur ... 442
14.2 ... Installation von Redux ... 445
14.3 ... Den zentralen Store konfigurieren ... 446
14.4 ... Der Umgang mit nderungen am Store mit Reducern ... 449
14.5 ... Komponenten und den Store verkn pfen ... 453
14.6 ... nderungen mit Actions beschreiben ... 457
14.7 ... Datens tze erstellen und bearbeiten ... 461
14.8 ... Zusammenfassung ... 466
15. Umgang mit Asynchronit t und Seiteneffekten in Redux ... 469
15.1 ... Middleware in Redux ... 469
15.2 ... Redux mit Redux Thunk ... 471
15.3 ... Zusammenfassung ... 488
16. Serverkommunikation mit GraphQL und dem Apollo-Client ... 491
16.1 ... Einf hrung in GraphQL ... 491
16.2 ... Apollo, ein GraphQL-Client f r React ... 497
16.3 ... Die Apollo Client Devtools ... 505
16.4 ... Lokales State-Management mit Apollo ... 506
16.5 ... Zusammenfassung ... 511
17. Internationalisierung ... 513
17.1 ... Einsatz von react-i18next ... 514
17.2 ... Platzhalter verwenden ... 522
17.3 ... Werte formatieren ... 525
17.4 ... Singular und Plural ... 529
17.5 ... Zusammenfassung ... 532
18. Performance ... 533
18.1 ... Der Callback-Hook ... 533
18.2 ... React.memo ... 537
18.3 ... Der React Compiler ... 540
18.4 ... Rules of React ... 543
18.5 ... React.lazy -- Suspense for Code Splitting ... 544
18.6 ... Suspense for Data Fetching ... 552
18.7 ... Virtuelle Tabellen ... 553
18.8 ... Zusammenfassung ... 558
19. Authentifizierung in einer React-Applikation ... 561
19.1 ... Grundlagen tokenbasierter Authentifizierung ... 562
19.2 ... Authentifizierungs-State und Token-Handling in React ... 564
19.3 ... Gesch tzte Ressourcen und Requests ... 569
19.4 ... Arbeiten mit Rollen ... 573
19.5 ... Zusammenfassung ... 575
20. Progressive Web Apps ... 577
20.1 ... Merkmale einer Progressive Web App ... 577
20.2 ... Initialisieren der Applikation ... 578
20.3 ... Installierbarkeit ... 580
20.4 ... Offlinef higkeit ... 590
20.5 ... Zusammenfassung ... 602
21. Native Apps mit React Native ... 605
21.1 ... Der Aufbau von React Native ... 605
21.2 ... Die Installation von React Native ... 606
21.3 ... Anzeige einer bersichtsliste ... 610
21.4 ... Debugging in der simulierten React-Native-Umgebung ... 624
21.5 ... Bearbeiten von Datens tzen ... 625
21.6 ... Publizieren ... 633
21.7 ... Zusammenfassung ... 635
22. Next.js -- Fullstack-React -- Grundlagen ... 637
22.1 ... Next.js -- die Hintergr nde ... 638
22.2 ... Installation ... 638
22.3 ... Die Struktur einer Next.js-Applikation ... 641
22.4 ... React Server Components ... 643
22.5 ... Statisches vs. dynamisches Rendern ... 648
22.6 ... Statische Generierung ... 651
22.7 ... Der App Router ... 652
22.8 ... Proxy ... 672
22.9 ... Zusammenfassung ... 673
23. Verbesserung der User-Experience mit Next.js ... 675
23.1 ... Client Components in Next.js ... 675
23.2 ... Arbeiten mit Suchparametern ... 680
23.3 ... loading.tsx -- Ladezust nde abbilden ... 685
23.4 ... error.tsx -- Fehler abfangen ... 688
23.5 ... not-found.tsx -- Anzeige bei fehlenden Daten ... 692
23.6 ... Caching in einer Next.js-Applikation ... 694
23.7 ... Revalidierung und Datenaktualisierung ... 698
23.8 ... Streaming ... 704
23.9 ... Cache Components ... 707
23.10 ... Zusammenfassung ... 714
24. Server Functions in Next.js ... 717
24.1 ... Server Functions definieren und ausf hren ... 717
24.2 ... Server Functions an Client Components weitergeben ... 720
24.3 ... Server Functions in Formularen ... 722
24.4 ... Hooks f r die Arbeit mit Formularen ... 724
24.5 ... Das Zusammenspiel von Server Functions und React Hook Form ... 731
24.6 ... Mit Transitionen arbeiten ... 734
24.7 ... Die use() -Funktion in Next.js ... 736
24.8 ... Zusammenfassung ... 738
25. Weitere Optimierungen in Next.js ... 739
25.1 ... Umgang mit Metadaten ... 739
25.2 ... Optimierung von Schriftdateien ... 746
25.3 ... Bilder optimieren ... 747
25.4 ... Prefetching von Links ... 750
25.5 ... Zusammenfassung ... 752
26. K nstliche Intelligenz in React-Applikationen ... 753
26.1 ... Architektur einer KI-Applikation ... 754
26.2 ... Modell- und Backend-Setup ... 756
26.3 ... Kommunikation zwischen React und dem LLM ... 757
26.4 ... Tools in React-Applikationen aufrufen ... 764
26.5 ... Personalisierung von UIs mit KI ... 769
26.6 ... Zusammenfassung ... 773
Index ... 775