Moderne Frontend- und Fullstack-Entwicklung mit React Welcher FrontendEntwickler hat noch nicht von React gehört? Die führende JavaScriptBibliothek 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 JavaScriptExperten 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 JavaScriptEntwickler profitieren Sie von zahlreichen Praxis und Profithemen von Testing, Styling und PerformanceOptimierung ü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, StateManagement und Formulargestaltung
• Testing, Performance, Routing, ServerSide 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 StateManagement und Alternativen zu Redux
• Asynchronität und Serverkommunikation mit TanStack Query
• Routing und Navigation in ReactApplikationen
• PerformanceOptimierung
• ServerSide Rendering und FullstackReact mit Next.js
• Serverkommunikation mit GraphQL und dem Apollo Client

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.

Klappentext

Die ersten SchritteErfahren Sie, was React ausmacht und wie Sie moderne Benutzeroberflächen entwickeln. Lernen Sie die grundlegende Struktur einer Applikation und die Grundlagen von React kennen. Lernen in der Praxis Durch zahlreiche Beispielprogramme erfahren Sie alles über die zentralen Konzepte moderner React Applikationen - von Hooks und TypeScript über Styling und Formulare bis hin zu Serverkommunikation. Professionelle und skalierbare Anwendungen entwickeln Auch bei größeren Projekten begleitet Sie das Buch zuverlässig: Statemanagement, asynchrone Prozesse, Testing, Performance, Fullstack-React mit Next.js, Authentifizierung und Applikationen mit KI.

Inhalt

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.…