Liebe Besucherinnen und Besucher,
aufgrund unseres Sommerfestes sind wir am 03. September 2026 bis 14 Uhr erreichbar. Am 04. September 2026 sind wir wieder wie gewohnt für Sie da. Vielen Dank für Ihr Verständnis.
Ihr Team von Sack Fachmedien
E-Book, Deutsch, 788 Seiten
Springer React
3. Auflage 2026
ISBN: 978-3-367-11546-4
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Das umfassende Handbuch
E-Book, Deutsch, 788 Seiten
ISBN: 978-3-367-11546-4
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
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
Autoren/Hrsg.
Weitere Infos & Material
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
Vorwort
React hat sich als feste Größe in der Frontendwelt etabliert und ist als eine der drei großen Lösungen neben Angular und Vue kaum noch wegzudenken. Dabei steht React für mich für eine leichtgewichtige und flexible Art der Entwicklung, die dennoch hoch professionell ist. React lässt Ihnen beim Aufbau und der Gestaltung Ihrer Applikation ein hohes Maß an Freiheit. Das ist Fluch und Segen zugleich. Gerade für Einsteiger wird es an dieser Stelle schwierig: Wo soll ich anfangen? Wie strukturiere ich meine Applikation? Wie löse ich konkrete Problemstellungen? Welche Bibliotheken und Hilfsmittel benötige ich für die Entwicklung meiner Applikation? Das sind nur einige Fragen, die man sich zu Beginn auf dem Weg mit React stellt, und genau an dieser Stelle setzt dieses Buch an. Zusammen implementieren wir eine vollständige Applikation, die zahlreiche Problemstellungen aus dem Praxisalltag abdeckt. Dabei lernen Sie nicht nur React selbst, sondern Teile des Ökosystems um die Bibliothek herum kennen. Egal ob Sie gerade erst dabei sind in React einzusteigen oder schon Erfahrung damit haben, ich möchte Sie einladen, dieses Buch als Gelegenheit zur aktiven Arbeit mit React zu nutzen. Arbeiten Sie mit den Codebeispielen, erweitern Sie sie oder bauen Sie Ihre eigenen Applikationen. Versuchen Sie verschiedene Anforderungen umzusetzen, und lassen Sie sich von den Codebeispielen und Lösungsansätzen für eigene Lösungen inspirieren. Es gibt kaum eine bessere Strategie, sich tiefer in ein Thema einzuarbeiten, als die Technologie oder das Werkzeug selbst zu verwenden, auch einmal einen Fehler zu machen und daraus zu lernen.
Für die Arbeit mit diesem Buch sollten Sie über ein solides Grundwissen in HTML, CSS und JavaScript verfügen. Falls Sie sich an der einen oder anderen Stelle unsicher sind oder sich fragen, was ein bestimmtes Sprachelement genau macht, lege ich Ihnen das Mozilla Developer Network unter https://developer.mozilla.org/de/ ans Herz. Hierbei handelt es sich um eine umfangreiche aktuelle Referenz für alle Webtechnologien. Arbeiten Sie lieber mit Büchern, kann ich Ihnen an dieser Stelle das JavaScript-Handbuch von Philip Ackermann empfehlen. Ansonsten empfehle ich Ihnen, neugierig zu sein und Dinge auszuprobieren. Fragen Sie sich: Was passiert, wenn ich an dieser Stelle dieses oder jenes tue? Probieren Sie es aus, öffnen Sie die Entwicklerwerkzeuge Ihres Browsers, und sehen Sie sich die Auswirkungen Ihres Experiments an. Der Vorteil der frontendseitigen Webentwicklung ist, dass Sie außer dem Frontend in Ihrer Applikation nichts weiter kaputt machen können, und auch das können Sie durch den Einsatz eines Versionskontrollsystems wie Git auf ein Minimum reduzieren, da Sie immer wieder auf einen funktionierenden Stand zurückwechseln können. Neben diesen Experimenten sollten Sie auch versuchen, die Beispielapplikation eigenständig weiterzuentwickeln oder eine eigene Applikation zu bauen.
Dieses Buch ist sowohl für den Einstieg in React als auch als Nachschlagewerk für den täglichen Gebrauch gedacht. Sie können die Beispiele entweder selbst nachvollziehen, indem Sie den Quellcode selbst schreiben, oder sie laden sich den Code herunter und passen ihn nach Ihren Wünschen an. Für mich ist eigentlich nur wichtig, dass Sie selbst mit React arbeiten, die Bibliothek und ihre Möglichkeiten kennenlernen und viel Spaß dabei haben.
Eine der häufigsten Fragen im Zusammenhang mit JavaScript-Bibliotheken und -Frameworks ist, welche/welches das Beste ist. Natürlich ist React eine gute Wahl, wenn es um die Implementierung eines Web-Frontends geht. Allerdings sind andere Lösungen wie Angular, Vue, Svelte und noch viele weitere deshalb nicht schlechter. Versuchen Sie, sich an dieser Stelle selbst ein Bild zu machen, geben Sie den verschiedenen Ansätzen eine Chance. Für mich hat sich React in der Praxis sowohl kleinen, aber auch großen Projekten bewährt.
Diese zweite Auflage spiegelt die Weiterentwicklung von React und dem Ökosystem um die Bibliothek wider. Außerdem ist sehr viel Feedback von LeserInnen der ersten Auflage eingeflossen. So setzt das Buch nicht mehr auf ein durchgängiges und gegen Ende des Buches sehr umfangreiches Beispiel, sondern auf kleinere Beispielapplikationen. Diese beschäftigen sich zwar alle mit dem Thema Bücherverwaltung, bauen jedoch nicht linear aufeinander auf.
Bevor ich Ihnen kurz noch den Aufbau dieses Buches vorstelle, möchte ich Ihnen noch einen Hinweis mit auf den Weg geben: Die Welt der JavaScript-Frameworks und -Bibliotheken ist extrem schnelllebig und so werden Sie feststellen, dass sich die Versionsnummern und teilweise auch die Features der hier vorgestellten Bibliotheken verändern werden. Deshalb liefere ich Ihnen in diesem Buch auch Hintergrundinformationen zu Konzepten und Architekturmustern, die es Ihnen ermöglichen sich auf Veränderungen einzustellen und sich sehr schnell in neue Features und Bibliotheken einzuarbeiten.
Aufbau des Buchs
Das Buch besteht aus drei Teilen, die sich in insgesamt 26 Kapitel unterteilen. Der erste Teil des Buchs beschäftigt sich mit React selbst und allem, was Sie wissen müssen, um eine Applikation zu implementieren. Der zweite Teil beleuchtet das Ökosystem der Bibliothek mit verschiedenen Problemstellungen aus dem Projektalltag und den dazu passenden Bibliotheken. Im dritten Teil erfahren Sie, wie Sie React außerhalb seines angestammten Ökosystems im Browser nutzen können und implementieren PWAs, native mobile Apps und Fullstack-Applikationen mit Next.js.
Der erste Teil beginnt mit einer Einführung in React, die Ihnen das Grundwissen und die wichtigsten Begriffe und Konzepte erläutert (Kapitel 1), und einer Erklärung, wie Sie React installieren und verwenden können (Kapitel 2). Anschließend lernen Sie in Kapitel 3 den Umgang mit React-Komponenten kennen. Sie erfahren, wie Sie den Komponentenbaum Ihrer Applikation aufbauen, wie die Daten in diesem Baum fließen und sehen wie der Lebenszyklus einer Komponente funktioniert. In Kapitel 4 erfahren Sie, wie Sie TypeScript in Ihre React-Applikation integrieren können und was Sie dabei beachten müssen. In Kapitel 5 stelle ich Ihnen den Lebenszyklus einer Komponente und weitere Konzepte wie Higher-Order Components, Render-Props und die Context-API vor. Kapitel 6 beschäftigt sich mit der Anbindung von Serverschnittstellen an Ihr Frontend. In Kapitel 7 erfahren Sie, wie Sie mit React Formulare umsetzen können, über die Benutzer mit Ihrer Applikation interagieren können. Kapitel 8 widmet sich der Hooks-API, einer Erweiterung von React, die die Art und Weise, wie eine Applikation aufgebaut wird, entscheidend beeinflusst. React unterstützt verschiedene Ansätze, wenn es um das Styling von Komponenten geht. Kapitel 9 stellt Ihnen einige dieser Ansätze vor und zeigt Ihnen, wie Sie sie in Ihre Applikation integrieren können. Ein wichtiges Hilfsmittel im Zusammenhang mit der Qualitätssicherung einer Applikation behandelt Kapitel 10, in dem es um das Formulieren von Unittests geht.
Der zweite Teil des Buchs beginnt mit einem Kapitel über die Integration externer Komponentenbibliotheken (Kapitel 11). Am Beispiel von Material-UI und Shadcn/ui sehen Sie, wie Sie existierende Komponenten in Ihre Applikation integrieren können. In Kapitel 12 erfahren Sie, wie Sie mithilfe des React-Routers innerhalb Ihrer Single-Page-Applikation navigieren und damit unterschiedliche Teilbäume Ihrer Applikation rendern können. Mit dem TanStack Router lernen Sie eine weitere Alternative für clientseitiges Routing kennen. Kapitel 13 behandelt mit eigenen Komponentenbibliotheken ein wichtiges Thema, wenn es darum geht Komponenten über Applikationsgrenzen wiederzuverwenden. Kapitel 14 und Kapitel 15 beschäftigen sich mit dem zentralen State-Management in einer Applikation mit der Bibliothek Redux und mit der Behandlung von Seiteneffekten mit verschiedenen asynchronen Middleware-Implementierungen wie beispielsweise Redux-Thunk. In Kapitel 16 lernen Sie, wie Sie in Ihrer React-Applikation eine GraphQL-Schnittstelle ansprechen können. Diese Abfragesprache stellt eine flexible Alternative zu den herkömmlichen RESTful-Schnittstellen dar, die üblicherweise in der Webentwicklung zum Einsatz kommen. Kapitel 17 bindet mit react-i18next eine weitere externe Bibliothek in die Applikation ein, um Internationalisierung zu unterstützen. Hier erfahren Sie neben der reinen Übersetzung von Zeichenketten auch mehr über den Umgang mit Zahlen und Datumswerten. Kapitel 18 widmet sich den Performanceverbesserungen in einer React-Applikation mit Memoisierung, dem React Compiler und Lazy Loading. In Kapitel 19 sehen Sie, wie Sie Authentifizierung in Ihrer React-Applikation umsetzen können.
Der dritte Teil des Buchs beschäftigt sich mit verschiedenen Umgebungen, in denen Sie React nutzen können. Den Anfang macht Kapitel 20 mit Progressiven Web Apps, also offlinefähigen und installierbaren Web-Applikationen. Kapitel 21 geht noch einen Schritt weiter und stellt Ihnen vor, wie Sie mithilfe von React Native Apps für mobile Endgeräte umsetzen können.
Die folgenden Kapitel beschäftigen sich mit Fullstack React Applikationen auf Basis von...
