Durchstarten mit React
Web-Apps einfach und modular entwickeln
Stoyan Stefanov
Cite this publication as
Stoyan Stefanov, Durchstarten mit React (2017), O'Reilly Verlag, Heidelberg, ISBN: 9783960100904
2229
accesses
accesses
16
quotes
quotes
Descripción / Abstract
Eignen Sie sich ohne Ballast alles Wesentliche zur Frontendentwicklung mit React an – einer JavaScript-Bibliothek, die in Entwicklerkreisen derzeit auf großes Interesse stößt. In diesem praktischen Leitfaden erläutert Stoyan Stefanov, Webentwickler bei Facebook, Reacts Komponentenarchitektur und zeigt, wie Sie in kurzer Zeit komplexe und dennoch wartbare Webanwendungen entwickeln. Sie benötigen keine besonderen Vorkenntnisse – lediglich Grundkenntnisse der JavaScript-Syntax – und können sofort loslegen.
Haben Sie einmal verstanden, wie React funktioniert, werden Sie eine maßgeschneiderte eigene App bauen, mit der Anwender Weine bewerten und ergänzende Notizen erfassen können. Sie verstehen dann schnell, warum so viele Entwickler React als Schlüsseltechnologie der modernen Webentwicklung sehen.
- Richten Sie React ein und schreiben Sie Ihre erste "Hallo Welt"-Web-App.
- Erstellen und verwenden Sie eigene React-Komponenten, die aus generischen DOM-Komponenten aufgebaut sind.
- Bauen Sie eine Komponente für eine Datentabelle, mit der Sie deren Inhalt bearbeiten, sortieren, durchsuchen und exportieren können.
- Verwenden Sie die Syntaxerweiterung JSX als Alternative zu Funktionsaufrufen.
- Richten Sie einen übersichtlichen, einfachen Build-Prozess ein, der Ihnen hilft, das Augenmerk auf React zu legen.
- Erstellen Sie eine vollständige Anwendung, mit der Sie Daten auf dem Client speichern können.
- Setzen Sie ESLint, Flow und Jest ein, um den Code Ihrer komplexer werdenden Anwendung zu testen.
- Organisieren Sie mit Flux die Kommunikation zwischen Komponenten.
Haben Sie einmal verstanden, wie React funktioniert, werden Sie eine maßgeschneiderte eigene App bauen, mit der Anwender Weine bewerten und ergänzende Notizen erfassen können. Sie verstehen dann schnell, warum so viele Entwickler React als Schlüsseltechnologie der modernen Webentwicklung sehen.
- Richten Sie React ein und schreiben Sie Ihre erste "Hallo Welt"-Web-App.
- Erstellen und verwenden Sie eigene React-Komponenten, die aus generischen DOM-Komponenten aufgebaut sind.
- Bauen Sie eine Komponente für eine Datentabelle, mit der Sie deren Inhalt bearbeiten, sortieren, durchsuchen und exportieren können.
- Verwenden Sie die Syntaxerweiterung JSX als Alternative zu Funktionsaufrufen.
- Richten Sie einen übersichtlichen, einfachen Build-Prozess ein, der Ihnen hilft, das Augenmerk auf React zu legen.
- Erstellen Sie eine vollständige Anwendung, mit der Sie Daten auf dem Client speichern können.
- Setzen Sie ESLint, Flow und Jest ein, um den Code Ihrer komplexer werdenden Anwendung zu testen.
- Organisieren Sie mit Flux die Kommunikation zwischen Komponenten.
Descripción
Stoyan Stefanov ist Entwickler bei Facebook. Zuvor hat er bei Yahoo den Online-Bildoptimierer smush.it entwickelt und war Architekt des Performance-Tools YSlow 2.0. Stoyan ist Autor von "JavaScript Patterns" und "Object-Oriented JavaScript", Blogger (phpied.com) und regelmäßiger Sprecher auf Veranstaltungen wie der O'Reilly Velocity Conference, JSConf, Fronteers und vielen weiteren Konferenzen.
Índice
- BEGINN
- Inhalt
- Vorwort
- Kapitel 1: Hallo Welt
- Einrichten
- Hallo React-Welt
- Was ist da gerade passiert?
- React.DOM.*
- Besondere DOM-Attribute
- Browsererweiterung React DevTools
- Als Nächstes: eigene Komponenten
- Kapitel 2: Das Leben einer Komponente
- Minimalversion
- Eigenschaften
- propTypes
- Status
- Eine zustandsbehaftete Textarea-Komponente
- Ein Hinweis zu DOM-Events
- Props versus State
- Props im initialen Status: ein Anti-Pattern
- Von außen auf die Komponente zugreifen
- Eigenschaften später ändern
- Lifecycle-Methoden
- Lifecycle-Beispiel: Alles loggen
- Lifecycle-Beispiel: Ein Mixin verwenden
- Lifecycle-Beispiel: Der Einsatz einer Kind-Komponente
- Performanceverbesserung: Aktualisieren von Komponenten verhindern
- PureRenderMixin
- Kapitel 3: Excel: Eine schicke Tabellen-Komponente
- Zuerst die Daten
- Schleife über den Tabellenkopf
- Die Warnung an der Konsole debuggen
- <td>-Inhalte hinzufügen
- Sortieren
- Sortierhinweise im UI
- Daten bearbeiten
- Suchen
- Instant Replay
- Die Tabellendaten herunterladen
- Kapitel 4: JSX
- Hallo JSX
- JSX transpilieren
- Babel
- Clientseite
- Die JSX-Transformation
- JavaScript in JSX
- Whitespace in JSX
- Kommentare in JSX
- HTML-Entitäten
- Spread-Attribute
- Mehrere Knoten in JSX zurückgeben
- Unterschiede zwischen JSX und HTML
- JSX und Formulare
- Die Excel-Komponente in JSX
- Kapitel 5: Die Umgebung für die Anwendungsentwicklung einrichten
- Eine Anwendungsvorlage
- Voraussetzungen einrichten
- Auf zum Bauen
- Deployment
- Nächste Schritte
- Kapitel 6: Eine Anwendung bauen
- Whinepad v.0.0.1
- Die Komponenten
- Anwendungskonfiguration
- <Excel>: neu und verbessert
- <Whinepad>
- Alles zusammen
- Kapitel 7: Lint, Flow, Test, Repeat
- package.json
- ESLint
- Flow
- Testen
- Kapitel 8: Flux
- Die Idee
- Ein anderer Blick auf Whinepad
- Der Store
- Actions
- Zusammenfassung
- Immutable
- Index
- Über den Autor
- Kolophon