E-Book, Deutsch, 735 Seiten
Reihe: Rheinwerk Computing
Springer React
2. Auflage 2023
ISBN: 978-3-8362-9256-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Das umfassende Handbuch
E-Book, Deutsch, 735 Seiten
Reihe: Rheinwerk Computing
ISBN: 978-3-8362-9256-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
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
Autoren/Hrsg.
Weitere Infos & Material
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
Vorwort
React hat sich in den letzten Jahren 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 zwei Teilen, die sich in insgesamt 21 Kapitel unterteilen. Der erste Teil des Buchs beschäftigt sich mit React selbst, der zweite Teil beleuchtet das Ökosystem der Bibliothek mit verschiedenen Problemstellungen aus dem Projektalltag.
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 und Kapitel 4 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. Weiterführende Konzepte wie Higher-Order Components und Render Props ergänzen dieses Grundlagenwissen. In Kapitel 5 stelle ich ihnen die mittlerweile veralteten Klassenkomponenten vor. Das hat vor allem den Hintergrund, dass Sie dieser Art von Komponenten in bestehenden Applikationen immer wieder begegnen. Kapitel 6 widmet sich der Hooks-API, einer Erweiterung von React, die die Art und Weise, wie eine Applikation aufgebaut wird, entscheidend beeinflusst. Mit TypeScript lernen Sie in Kapitel 7 ein Werkzeug kennen, das Sie bei der Umsetzung unterstützt und Ihnen zusätzliche Sicherheit im Entwicklungsprozess bietet.
React unterstützt verschiedene Ansätze, wenn es um das Styling von Komponenten geht. Kapitel 8 stellt Ihnen einige dieser Ansätze vor und zeigt Ihnen, wie Sie sie in Ihre Applikation integrieren können. Ein weiteres Hilfsmittel im Zusammenhang mit der Qualitätssicherung einer Applikation behandelt Kapitel 9, in dem es um das Formulieren von Unittests geht. Kapitel 10 schließt den ersten Teil des Buchs mit einem Blick auf Formulare ab. Mithilfe von Formularen geben Sie Ihren BenutzerInnen die Möglichkeit, aktiv mit der Applikation zu interagieren und Daten zu produzieren.
Der zweite Teil des Buchs beginnt mit einem Kapitel über die Integration externer Komponentenbibliotheken (Kapitel 11). Am Beispiel von Material-UI sehen Sie, wie Sie existierende Komponenten in Ihre Applikation integrieren können. In Kapitel 12 sehen Sie, wie Sie mithilfe des React-Routers innerhalb Ihrer Single-Page-Applikation navigieren und damit unterschiedliche Teilbäume Ihrer Applikation rendern können. 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.
Die letzten drei Kapitel beschäftigen sich mit unterschiedlichen Umgebungen, die von einer React-Applikation berührt werden. Den Beginn macht Kapitel 18 mit einer Einführung in das serverseitige Rendering, um die Performance einer Applikation zu verbessern. In diesem Kapitel lernen Sie außerdem das populäre React-Framework Next.js kennen. Kapitel 19 widmet sich verschiedenen Performance-Aspekten von React-Applikationen. Anschließend erfahren Sie, wie Sie mit React eine Progressive Web App umsetzen können, die sich auf dem System von BenutzerInnen installieren und auf möglichst vielen Systemen ausführen lässt (Kapitel 20). Die Idee von React auf unterschiedlichen Systemen wird im letzten Kapitel, Kapitel 21, mit React Native noch einen Schritt weitergeführt, indem Sie erfahren, wie Sie mit dieser Bibliothek native Apps mit React umsetzen können.
...