Das umfassende Handbuch für moderne Frontend-Entwicklung. Mit vielen Praxisbeispielen

Erfahren Sie in dem neuen Buch 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

Autorentext
Sebastian Springer arbeitet als Teamleiter bei der Mayflower GmbH in München. Sein Fokus liegt auf der Entwicklung von dynamischen Webapplikationen mit JavaScript und PHP.

Inhalt

Materialien zum Buch ... 16
Geleitwort des Fachgutachters ... 17
Vorwort ... 19
1. Die ersten Schritte mit React ... 23

1.1 ... Was ist React? ... 23
1.2 ... Warum React? ... 28
1.3 ... Die wichtigsten Begriffe und Konzepte der React-Welt ... 29
1.4 ... Ein Blick in das React-Universum ... 35
1.5 ... Thinking in React ... 36
1.6 ... Die Beispielapplikation ... 38
1.7 ... Zusammenfassung ... 39

2. Die ersten Schritte im Entwicklungsprozess ... 41

2.1 ... Playgrounds für React ... 41
2.2 ... Lokale Entwicklung ... 44
2.3 ... Der Einstieg in die Entwicklung mit React ... 48
2.4 ... Die Struktur der Applikation ... 61
2.5 ... Fehlersuche in einer React-Applikation ... 63
2.6 ... Applikation bauen ... 65
2.7 ... Zusammenfassung ... 66

3. Die Grundlagen von React ... 67

3.1 ... Vorbereitung ... 67
3.2 ... Funktionskomponenten ... 70
3.3 ... JSX - Strukturen in React definieren ... 77
3.4 ... Props - Informationsfluss in einer Applikation ... 87
3.5 ... Klassenkomponenten ... 92
3.6 ... Lokaler State ... 94
3.7 ... Event-Binding - Reaktion auf Benutzerinteraktionen ... 98
3.8 ... Zusammenfassung ... 110

4. Ein Blick hinter die Kulissen - weiterführende Themen ... 113

4.1 ... Komponenten-Lifecycle ... 113
4.2 ... Serverkommunikation ... 125
4.3 ... Container Components ... 130
4.4 ... Higher-Order Components ... 136
4.5 ... Render Props ... 143
4.6 ... Error Boundaries ... 147
4.7 ... Kontext ... 151
4.8 ... Fragments ... 158
4.9 ... Zusammenfassung ... 159

5. Die Hooks-API von React ... 161

5.1 ... Ein erster Überblick ... 162
5.2 ... Die Basis-Hooks im Einsatz ... 164
5.3 ... Custom Hooks ... 178
5.4 ... Rules of Hooks - was Sie beachten sollten ... 185
5.5 ... Umstieg auf Hooks ... 187
5.6 ... Performance ... 188
5.7 ... Zusammenfassung ... 191

6. Typsicherheit in React-Applikationen mit TypeScript ... 193

6.1 ... Was bringt ein Typsystem? ... 193
6.2 ... Die verschiedenen Typsysteme ... 194
6.3 ... Typsicherheit in einer React-Applikation mit Flow ... 195
6.4 ... Einsatz von TypeScript in einer React-Applikation ... 200
6.5 ... TypeScript und React ... 205
6.6 ... Zusammenfassung ... 220

7. Styling von React-Komponenten ... 221

7.1 ... CSS Imports ... 221
7.2 ... Inline-Styling ... 230
7.3 ... CSS in JS ... 232
7.4 ... CSS-Module ... 236
7.5 ... Styled Components ... 239
7.6 ... Zusammenfassung ... 244

8. Absichern einer React-Applikation durch Tests ... 247

8.1 ... Die ersten Schritte mit Jest ... 248
8.2 ... Testen von Hilfsfunktionen ... 264
8.3 ... Snapshot-Testing ... 265
8.4 ... Komponenten testen ... 269
8.5 ... Umgang mit Serverabhängigkeiten ... 272
8.6 ... Bibliotheken für komfortableres Testen ... 274
8.7 ... Zusammenfassung ... 278

9. Formulare in React ... 279

9.1 ... Uncontrolled Components ... 279
9.2 ... Controlled Components ... 292
9.3 ... Upload von Dateien ... 298
9.4 ... Formularvalidierung mit Formik ... 301
9.5 ... Zusammenfassung ... 310

10. Komponentenbibliotheken in einer React-Applikation ... 313

10.1 ... Installation und Integration von Material-UI ... 313
10.2 ... Listendarstellung mit der »Table«-Komponente ... 314
10.3 ... Grids und Breakpoints ... 323
10.4 ... Icons ... 325
10.5 ... Datensätze löschen ... 328
10.6 ... Neue Datensätze erzeugen ... 334
10.7 ... Datensätze editieren ... 343
10.8 ... Zusammenfassung ... 348

11. Navigation innerhalb einer Applikation - der Router ... 349

11.1 ... Installation und Einbindung ... 350
11.2 ... Navigation in der Applikation ... 351
11.3 ... »Not found« ... 359
11.4 ... Auth Redirect ... 361
11.5 ... Dynamische Routen ... 363
11.6 ... Zusammenfassung ... 367

12. Zentrales State-Management mit Redux ... 369

12.1 ... Die Flux-Architektur ... 369
12.2 ... Installation von Redux ... 373
12.3 ... Den zentralen Store konfigurieren ... 373
12.4 ... Umgang mit Änderungen am Store mit Reducern ... 378
12.5 ... Verknüpfung von Komponenten und Store ... 381
12.6 ... Beschreibung von Änderungen mit Actions ... 391
12.7 ... Ausblick Redux-React-Hook ... 400
12.8 ... Zusammenfassung ... 403

13. Umgang mit Asynchronität und Seiteneffekten in Redux ... 405

13.1 ... Middleware in Redux ... 405
13.2 ... Redux mit Redux Thunk ... 407
13.3 ... Async/Await und Generators - Redux Saga ... 424
13.4 ... State-Management mit RxJS - Redux Observable ... 433
13.5 ... JWT zur Authentifizierung ... 441
13.6 ... Zusammenfassung ... 455

14. Serverkommunikation mit GraphQL und dem Apollo-Client ... 457

14.1 ... Einführung in GraphQL ... 457
14.2 ... Apollo, ein GraphQL-Client für React ... 463
14.3 ... Die Apollo Client Devtools ... 475
14.4 ... Lokales State-Management mit Apollo ... 476
14.5 ... Authentifizierung ... 483
14.6 ... Zusammenfassung ... 484

15. Internationalisierung ... 487

15.1 ... Einsatz von React Intl ... 487
15.2 ... Verwendung von Platzhaltern ... 496
15.3 ... Programmatische Übersetzungen ... 497
15.4 ... Formatierung von Zahlen ... 499
15.5 ... Singular und Plural ... 502
15.6 ... React Intl und Redux ... 505
15.7 ... Zusammenfassung ... 509

16. Universal React Apps mit Server-Side Rendering ... 511

16.1 ... Wie funktioniert Server-Side Rendering? ... 512
16.2 ... Umsetzung von Server-Side Rendering ... 513
16.3 ... Ausblick: Server-Side Rendering bei Applikationen mit Authentifizierung ... 526
16.4 ... Ausblick: Server-Side Rendering und Redux ... 528
16.5 ... Zusammenfassung ... 529

17. Progressive Web Apps ... 531

17.1 ... Merkmale einer Progressive Web App ... 531
17.2 ... Installierbarkeit ... 532
17.3 ... Offlinefähigkeit ... 543
17.4 ... Werkzeuge für die Entwicklung ... 553
17.5 ... Zusammenfassung ... 554

18. Native Apps mit React Native ... 557

18.1 ... Der Aufbau von React Native ... 557
18.2 ... Installation von React Native ... 558
18.3 ... Anzeige einer Übersichtsliste ... 562
18.4 ... Debugging in der simulierten React-Native-Umgebung ... 572
18.5 ... Bearbeiten von Datensätzen ... 575
18.6 ... Publizieren ... 581
18.7 ... Zusammenfassung ... 583

Index ... 585