Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Aus dem Lektorat
Hinweise zur Benutzung und Bildschirmdarstellung
Inhaltsverzeichnis
Materialien zum Buch
Geleitwort des Fachgutachters
Vorwort
Aufbau des Buchs
Download der Codebeispiele
Danksagung
1 Die ersten Schritte mit React
1.1 Was ist React?
1.1.1 Single-Page-Applikationen
1.1.2 Die Geschichte von React
1.2 Warum React?
1.2.1 Der Releasezyklus
1.3 Die wichtigsten Begriffe und Konzepte der React-Welt
1.3.1 Komponenten und Elemente
1.3.2 Der Datenfluss
1.3.3 Der Renderer
1.3.4 Der Reconciler
1.4 Ein Blick in das React-Universum
1.4.1 Das State-Management
1.4.2 Der Router
1.4.3 Material UI
1.4.4 Jest
1.5 Thinking in React
1.5.1 Die Oberfläche in eine Komponentenhierarchie zerlegen
1.5.2 Eine statische Version in React implementieren
1.5.3 Den minimalen UI State bestimmen
1.5.4 Den Speicherort des States bestimmen
1.5.5 Den inversen Datenfluss modellieren
1.6 Codebeispiele
1.7 Zusammenfassung
2 Die ersten Schritte im Entwicklungsprozess
2.1 Schnellstart
2.1.1 Die Initialisierung
2.2 Playgrounds für React
2.2.1 CodePen – ein Playground für die Webentwicklung
2.3 Lokale Entwicklung
2.3.1 React in eine HTML-Seite einbinden
2.4 Der Einstieg in die Entwicklung mit React
2.4.1 Anforderungen
2.4.2 Installation von Create React App
2.4.3 Alternativen zu Create React App
2.4.4 React Scripts
2.4.5 Serverkommunikation im Entwicklungsbetrieb
2.4.6 Verschlüsselte Kommunikation während der Entwicklung
2.5 Die Struktur der Applikation
2.6 Fehlersuche in einer React-Applikation
2.6.1 Arbeiten mit den React Developer Tools
2.7 Die Applikation bauen
2.8 Zusammenfassung
3 Die Grundlagen von React
3.1 Vorbereitung
3.1.1 Die Applikation aufräumen
3.2 Einstieg in die Applikation
3.2.1 Index.jsx – das Rendering der Applikation
3.2.2 App.jsx – die Wurzelkomponente
3.3 Funktionskomponenten
3.3.1 Eine Komponente pro Datei
3.4 JSX – Strukturen in React definieren
3.4.1 Ausdrücke in JSX
3.4.2 Iterationen – Schleifen in Komponenten
3.4.3 Bedingungen in JSX
3.5 Props – Informationsfluss in einer Applikation
3.5.1 Props und Kindkomponenten
3.5.2 Typsicherheit mit PropTypes
3.6 Lokaler State
3.7 Event-Binding – Reaktion auf Benutzerinteraktionen
3.7.1 Auf Events reagieren
3.7.2 Arbeiten mit Event-Objekten
3.8 Immutability
3.8.1 Immer in einer React-Applikation
3.9 Zusammenfassung
4 Ein Blick hinter die Kulissen – weiterführende Themen
4.1 Der Lebenszyklus einer Komponente
4.2 Der Lebenszyklus einer Funktionskomponente mit dem Effect-Hook
4.2.1 Mount – das Einhängen einer Komponente
4.2.2 Update – Aktualisieren der Komponente
4.2.3 Unmount – Aufräumen am Ende des Lebenszyklus
4.3 Serverkommunikation
4.3.1 Serverimplementierung
4.3.2 Serverkommunikation mit der Fetch API
4.3.3 Wissenswertes zur Serverkommunikation
4.3.4 Serverkommunikation mit Axios
4.4 Container Components
4.4.1 Auslagern von Logik in eine Container Component
4.4.2 Einbindung der Container Component
4.4.3 Implementierung der Presentational Component
4.5 Higher-Order Components
4.5.1 Eine einfache Higher-Order Component
4.5.2 Einbindung einer Higher-Order Component in die BooksList-Komponente
4.5.3 Einbindung der Higher-Order Component
4.6 Render Props
4.6.1 Alternative Namen für Render Props
4.6.2 Integration der Render Props in die Applikation
4.7 Kontext
4.7.1 Die Context-API
4.7.2 Einsatz der Context-API in der Beispielapplikation
4.8 Fragments
4.9 Zusammenfassung
5 Klassenkomponenten
5.1 Klassenkomponenten in React
5.2 Grundlegende Struktur einer Klassenkomponente
5.3 Props in einer Klassenkomponente
5.3.1 Prop-Strukturen mit PropTypes definieren
5.3.2 Standardwerte für Props
5.4 State – der Zustand der Klassenkomponente
5.4.1 Den State über die state-Eigenschaft der Klasse initialisieren
5.4.2 Den State im Konstruktor initialisieren
5.5 Der Komponenten-Lifecycle
5.5.1 Constructor
5.5.2 »getDerivedStateFromProps«
5.5.3 »render«
5.5.4 »componentDidMount«
5.5.5 »shouldComponentUpdate«
5.5.6 »getSnapshotBeforeUpdate«
5.5.7 »componentDidUpdate«
5.5.8 »componentWillUnmount«
5.5.9 Unsafe Hooks
5.6 Error Boundaries
5.6.1 Mit »componentDidCatch« Fehler loggen
5.6.2 Alternative Darstellung im Fehlerfall mit »getDerivedStateFromError«
5.7 Die Context-API in einer Klassenkomponente verwenden
5.8 Unterschiede zwischen Funktions- und Klassenkomponenten
5.8.1 State
5.8.2 Lifecycle
5.9 Zusammenfassung
6 Die Hooks-API von React
6.1 Ein erster Überblick
6.1.1 Die drei Basis-Hooks
6.1.2 Weitere Bestandteile der Hooks-API
6.2 »useReducer« – der Reducer Hook
6.2.1 Die Reducer-Funktion
6.2.2 Actions und Dispatching
6.2.3 Asynchronität im Reducer-Hook
6.3 »useCallback« – Memoisieren von Funktionen
6.4 »useMemo« – Memoisieren von Objekten
6.5 »useRef« – Referenzen und immutable Values
6.5.1 Formularhandling mit dem Ref-Hook
6.5.2 Werte mit dem Ref-Hook zwischenspeichern
6.6 »useImperativeHandle« – Steuerung von ForwardRefs
6.6.1 ForwardRefs
6.6.2 Der ImperativeHandle-Hook
6.7 »useLayoutEffect« – die synchrone Alternative zu useEffect
6.8 »useDebugValue« – Debugging-Informationen in den React Developer Tools
6.9 »useDeferredValue« – Updates nach Priorität durchführen
6.10 »useTransition« – die Priorität von Operationen heruntersetzen
6.11 »useId« – Eindeutige Identifier erzeugen
6.12 Bibliotheks-Hooks
6.12.1 »useSyncExternalStore«
6.12.2 »useInsertionEffect«
6.13 Custom Hooks
6.13.1 Ein Beispiel für einen Custom Hook
6.14 Rules of Hooks – was Sie beachten sollten
6.14.1 Regel #1: Hooks nur auf oberster Ebene ausführen
6.14.2 Regel #2: Hooks dürfen nur in Funktionskomponenten oder Custom Hooks verwendet werden
6.15 Umstieg auf Hooks
6.16 Zusammenfassung
7 Typsicherheit in React-Applikationen mit TypeScript
7.1 Was bringt ein Typsystem?
7.2 Die verschiedenen Typsysteme
7.3 Typsicherheit in einer React-Applikation mit Flow
7.3.1 Einbindung in eine React-Applikation
7.3.2 Die wichtigsten Features von Flow
7.3.3 Flow in React-Komponenten
7.4 TypeScript in einer React-Applikation einsetzen
7.4.1 TypeScript in eine React-Applikation einbinden
7.4.2 Konfiguration von TypeScript
7.4.3 Die wichtigsten Features von TypeScript
7.4.4 Typdefinitionen – Informationen über Drittanbieter-Software
7.5 TypeScript und React
7.5.1 TypeScript zu einer bestehenden Applikation hinzufügen
7.5.2 Basisfeatures
7.5.3 Funktionskomponenten
7.5.4 Context
7.5.5 Klassenkomponenten
7.6 Zusammenfassung
8 Styling von React-Komponenten
8.1 CSS-Import
8.1.1 Die Vor- und Nachteile des CSS-Imports
8.1.2 Umgang mit Klassennamen
8.1.3 Verbesserte Behandlung von Klassennamen mit der »classnames«-Bibliothek
8.1.4 Verwendung von Sass als CSS-Präprozessor
8.2 Inline-Styling
8.3 CSS-Module
8.4 CSS in JavaScript mit Emotion
8.4.1 Emotion installieren
8.4.2 Arbeiten mit der »css«-Prop
8.4.3 Der styled-Ansatz von Emotion
8.4.4 Pseudoselektoren in Styled Components
8.4.5 Dynamisches Styling
8.4.6 Weitere Features von Styled Components
8.5 Tailwind
8.5.1 Tailwind installieren und einbinden
8.6 Zusammenfassung
9 Eine React-Applikation durch Tests absichern
9.1 Die ersten Schritte mit Jest
9.1.1 Installation und Ausführung
9.1.2 Organisation der Tests
9.1.3 Jest – die Grundlagen
9.1.4 Aufbau eines Tests – Triple A
9.1.5 Die Matcher von Jest
9.1.6 Gruppierung von Tests – Testsuites
9.1.7 Setup- und Teardown-Routinen
9.1.8 Tests überspringen und exklusiv ausführen
9.1.9 Umgang mit Exceptions
9.1.10 Testen von asynchronen Operationen
9.2 Testen von Hilfsfunktionen
9.3 Snapshot-Testing
9.3.1 Snapshot-Tests für Komponenten
9.4 Komponenten testen
9.4.1 Test der »BooksListItem«-Komponente
9.4.2 Interaktion testen
9.5 Umgang mit Serverabhängigkeiten
9.5.1 Fehler bei der Kommunikation simulieren
9.6 Zusammenfassung
10 Formulare in React
10.1 Uncontrolled Components
10.1.1 Der Umgang mit Referenzen in React
10.2 Controlled Components
10.2.1 Synthetic Events
10.3 Der Upload von Dateien
10.4 Formularvalidierung mit React Hook Form
10.4.1 Formularvalidierung mit React Hook Form
10.4.2 Formularvalidierung mit einem Schema
10.4.3 Styling des Formulars
10.4.4 Die Formularvalidierung automatisiert testen
10.5 Zusammenfassung
11 Komponentenbibliotheken in einer React-Applikation
11.1 Installation und Integration von Material-UI
11.2 Listendarstellung mit der »Table«-Komponente
11.2.1 Die Liste in der Tabelle filtern
11.2.2 Die Tabelle sortieren
11.3 Grids und Breakpoints
11.4 Icons
11.5 Datensätze löschen
11.5.1 Eine Löschoperation vorbereiten
11.5.2 Einen Bestätigungsdialog implementieren
11.5.3 Datensätze löschen
11.6 Neue Datensätze erzeugen
11.6.1 Das Erzeugen von Datensätzen vorbereiten
11.6.2 Implementierung der »Form«-Komponente
11.6.3 Integration des Formulardialogs
11.7 Datensätze editieren
11.8 Zusammenfassung
12 Navigation innerhalb einer Applikation – der Router
12.1 Installation und Einbindung
12.1.1 Die Routerkomponenten
12.2 Navigation in der Applikation
12.2.1 Es wird immer die beste Route aktiviert
12.2.2 Eine Navigationsleiste für die Applikation
12.2.3 Integration der Navigationsleiste
12.3 »Not found«
12.4 Testen des Routings
12.5 Bedingte Umleitungen
12.6 Dynamische Routen
12.6.1 Subrouten definieren
12.7 Zusammenfassung
13 Eigene React-Bibliotheken erzeugen
13.1 Eine eigene Komponentenbibliothek erzeugen
13.1.1 Initialisierung der Bibliothek
13.1.2 Die Struktur der Bibliothek
13.1.3 Hooks in der Bibliothek
13.1.4 Das Bauen der Bibliothek
13.2 Einbinden der Bibliothek
13.2.1 Reguläre Installation des Pakets
13.3 Testen der Bibliothek
13.3.1 Die Testumgebung vorbereiten
13.3.2 Unittest für die Bibliothekskomponente
13.3.3 Unittest des Custom Hooks der Bibliothek
13.4 Storybook
13.4.1 Installation und Konfiguration von Storybook
13.4.2 Button-Story in Storybook
13.5 Zusammenfassung
14 Zentrales State-Management mit Redux
14.1 Die Flux-Architektur
14.1.1 Der zentrale Datenspeicher – der Store
14.1.2 Die Anzeige der Daten mit den Views
14.1.3 Actions – die Beschreibung von Änderungen
14.1.4 Der Dispatcher – die Schnittstelle zwischen Actions und dem Store
14.2 Installation von Redux
14.2.1 Die Struktur der Applikation
14.3 Den zentralen Store konfigurieren
14.3.1 Debugging mit den Redux Dev Tools
14.4 Der Umgang mit Änderungen am Store mit Reducern
14.4.1 Der »Books«-Slice
14.4.2 Einbindung des »BooksSlice«
14.5 Komponenten und den Store verknüpfen
14.5.1 Anzeige der Daten aus dem Store
14.5.2 Selektoren
14.5.3 Selektoren mit Reselect umsetzen
14.6 Änderungen mit Actions beschreiben
14.6.1 Löschen von Datensätzen
14.7 Datensätze erstellen und bearbeiten
14.8 Zusammenfassung
15 Umgang mit Asynchronität und Seiteneffekten in Redux
15.1 Middleware in Redux
15.1.1 Eine eigene Middleware implementieren
15.2 Redux mit Redux Thunk
15.2.1 Manuelle Integration von Redux Thunk
15.2.2 Daten vom Server lesen
15.2.3 Datensätze löschen
15.2.4 Datensätze anlegen und modifizieren
15.3 Generators – Redux Saga
15.3.1 Installation und Einbindung von Redux Saga
15.3.2 Daten vom Server laden
15.3.3 Bestehende Daten löschen
15.3.4 Datensätze erstellen und modifizieren mit Redux Saga
15.4 State-Management mit RxJS – Redux Observable
15.4.1 Redux Observable installieren und einbinden
15.4.2 Lesender Zugriff auf den Server mit Redux Observable
15.4.3 Löschen mit Redux Observable
15.4.4 Datensätze anlegen und editieren mit Redux Observable
15.5 JWT zur Authentifizierung
15.5.1 Implementierung des »login«-Moduls
15.6 Zusammenfassung
16 Serverkommunikation mit GraphQL und dem Apollo-Client
16.1 Einführung in GraphQL
16.1.1 Die Charakteristik von GraphQL
16.1.2 Die Nachteile von GraphQL
16.1.3 Die Prinzipien von GraphQL
16.2 Apollo, ein GraphQL-Client für React
16.2.1 Installation und Einbindung in die Applikation
16.2.2 Lesender Zugriff auf den GraphQL-Server
16.2.3 Zustände einer Anfrage
16.2.4 Typunterstützung im Apollo-Client
16.2.5 Löschen von Datensätzen
16.3 Die Apollo Client Devtools
16.4 Lokales State-Management mit Apollo
16.4.1 Den lokalen State initialisieren
16.4.2 Den lokalen State benutzen
16.5 Authentifizierung
16.6 Zusammenfassung
17 Internationalisierung
17.1 Einsatz von react-i18next
17.1.1 Sprachdateien vom Backend laden
17.1.2 Die Sprache des Browsers verwenden
17.1.3 Die Navigation um eine Sprachumschaltung erweitern
17.2 Platzhalter verwenden
17.3 Werte formatieren
17.3.1 Zahlen und Währungen formatieren
17.3.2 Datumswerte formatieren
17.4 Singular und Plural
17.5 Zusammenfassung
18 Universal React Apps mit Server-Side Rendering
18.1 Wie funktioniert Server-Side Rendering?
18.2 Umsetzung von Server-Side Rendering
18.2.1 Die Server-Applikation initialisieren und konfigurieren
18.2.2 Die clientseitige Applikation implementieren
18.2.3 Dynamik im Server-Side Rendering
18.3 Server-Side Rendering mit Next.js
18.3.1 Eine Next.js-Applikation initialisieren
18.3.2 Die Page-Komponente implementieren
18.3.3 Die Serverseite implementieren
18.3.4 API-Routen in Next.js
18.4 Zusammenfassung
19 Performance
19.1 Der Callback-Hook
19.2 Pure Components
19.3 React.memo
19.4 »React.lazy« – Suspense for Code Splitting
19.4.1 Lazyloading in einer Applikation
19.4.2 Lazyloading mit dem React Router
19.5 Suspense for Data Fetching
19.5.1 React Query installieren und verwenden
19.5.2 React Query und Suspense
19.5.3 Concurrency Patterns
19.6 Virtuelle Tabellen
19.7 Zusammenfassung
20 Progressive Web Apps
20.1 Merkmale einer Progressive Web App
20.2 Initialisieren der Applikation
20.3 Installierbarkeit
20.3.1 Die sichere Auslieferung einer Applikation
20.3.2 Das Web App Manifest
20.3.3 Service Worker in der React-Applikation
20.3.4 Installation der Applikation
20.3.5 Die Benutzer*innen fragen
20.4 Offlinefähigkeit
20.4.1 Integration von Workbox
20.4.2 Umgang mit dynamischen Daten
20.5 Werkzeuge für die Entwicklung
20.6 Zusammenfassung
21 Native Apps mit React Native
21.1 Der Aufbau von React Native
21.2 Die Installation von React Native
21.2.1 Die Projektstruktur
21.2.2 Die Applikation starten
21.3 Anzeige einer Übersichtsliste
21.3.1 Statische Listenansicht
21.3.2 Styling in React Native
21.3.3 Suchfeld für die »List«-Komponente
21.3.4 Serverkommunikation
21.4 Debugging in der simulierten React-Native-Umgebung
21.5 Bearbeiten von Datensätzen
21.5.1 Implementierung der »Form«-Komponente
21.6 Publizieren
21.6.1 Build der App
21.7 Zusammenfassung
Stichwortverzeichnis
Die Serviceseiten
Rechtliche Hinweise
Über den Autor
← Prev
Back
Next →
← Prev
Back
Next →