O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Durchstarten mit React

Book Description

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 Grundkenntnis der JavaScript-Syntax – und können sofort loslegen.Haben Sie einmal verstanden, wie React funktioniert, werden Sie eine maßgeschneiderte eigene Whinepad-App bauen, die es den Anwendern ermöglicht, Weine zu bewerten und Notizen hierzu zu erfassen. Schnell werden Sie verstehen, warum so viele Entwickler React als Schlüsseltechnologie für die moderne Webentwicklung sehen.

Table of Contents

  1. Cover
  2. Titel
  3. Impressum
  4. Widmung
  5. Inhalt
  6. Vorwort
  7. 1 Hallo Welt
    1. Einrichten
    2. Hallo React-Welt
    3. Was ist da gerade passiert?
    4. React.DOM.*
    5. Besondere DOM-Attribute
    6. Browsererweiterung React DevTools
    7. Als Nächstes: eigene Komponenten
  8. 2 Das Leben einer Komponente
    1. Minimalversion
    2. Eigenschaften
    3. propTypes
      1. Standardeigenschaftswerte
    4. Status
    5. Eine zustandsbehaftete Textarea-Komponente
    6. Ein Hinweis zu DOM-Events
      1. Event-Handling in den alten Tagen
      2. Event-Handling in React
    7. Props versus State
    8. Props im initialen Status: ein Anti-Pattern
    9. Von außen auf die Komponente zugreifen
    10. Eigenschaften später ändern
    11. Lifecycle-Methoden
    12. Lifecycle-Beispiel: Alles loggen
    13. Lifecycle-Beispiel: Ein Mixin verwenden
    14. Lifecycle-Beispiel: Der Einsatz einer Kind-Komponente
    15. Performanceverbesserung: Aktualisieren von Komponenten verhindern
    16. PureRenderMixin
  9. 3 Excel: Eine schicke Tabellen-Komponente
    1. Zuerst die Daten
    2. Schleife über den Tabellenkopf
    3. Die Warnung an der Konsole debuggen
    4. <td>-Inhalte hinzufügen
      1. Wie können Sie die Komponente verbessern?
    5. Sortieren
      1. Wie können Sie die Komponente verbessern?
    6. Sortierhinweise im UI
    7. Daten bearbeiten
      1. Bearbeitbares Feld
      2. Eingabefeld
      3. Sichern
      4. Zusammenfassung und virtuelle DOM-Diffs
    8. Suchen
      1. Status und UI
      2. Inhalte filtern
      3. Wie können Sie die Suche verbessern?
    9. Instant Replay
      1. Wie können Sie die Wiedergabe verbessern?
      2. Eine alternative Implementierung?
    10. Die Tabellendaten herunterladen
  10. 4 JSX
    1. Hallo JSX
    2. JSX transpilieren
    3. Babel
    4. Clientseite
    5. Die JSX-Transformation
    6. JavaScript in JSX
    7. Whitespace in JSX
    8. Kommentare in JSX
    9. HTML-Entitäten
      1. Anti-XSS
    10. Spread-Attribute
      1. Spread-Attribute vom Eltern-Element
    11. Mehrere Knoten in JSX zurückgeben
    12. Unterschiede zwischen JSX und HTML
      1. Kein class und for
      2. style ist ein Objekt
      3. Schließende Tags
      4. Attribute im camelCase
    13. JSX und Formulare
      1. onChange-Handler
      2. value versus defaultValue
      3. Value in <textarea>
      4. Value in <select>
    14. Die Excel-Komponente in JSX
  11. 5 Die Umgebung für die Anwendungsentwicklung einrichten
    1. Eine Anwendungsvorlage
    2. Dateien und Ordner
      1. index.html
      2. CSS
      3. JavaScript
      4. JavaScript: modernisiert
    3. Voraussetzungen einrichten
      1. Node.js
      2. Browserify
      3. Babel
      4. React usw
    4. Auf zum Bauen
      1. JavaScript transpilieren
      2. JavaScript verpacken
      3. CSS verpacken
      4. Ergebnisse!
      5. Windows-Version
      6. Während der Entwicklung bauen
    5. Deployment
    6. Nächste Schritte
  12. 6 Eine Anwendung bauen
    1. Whinepad v.0.0.1
      1. Einrichten
      2. Erster Code
    2. Die Komponenten
      1. Setup
      2. Entdecken
      3. <Button>-Komponente
      4. Button.css
      5. Button.js
      6. Formulare
      7. <Suggest>
      8. <Rating>-Komponente
      9. Eine <FormInput>-»Fabrik«
      10. <Form>
      11. <Actions>
      12. Dialoge
    3. Anwendungskonfiguration
    4. <Excel>: neu und verbessert
    5. <Whinepad>
    6. Alles zusammen
  13. 7 Lint, Flow, Test, Repeat
    1. package.json
      1. Babel konfigurieren
      2. scripts
    2. ESLint
      1. Einrichtung
      2. Ausführen
      3. Alle Regeln
    3. Flow
      1. Einrichten
      2. Ausführen
      3. Für die Typprüfung registrieren
      4. <Button> korrigieren
      5. app.js
      6. Mehr zur Typprüfung von props und state
      7. Typen exportieren und importieren
      8. Typecasting
      9. Invarianten
    4. Testen
      1. Einrichten
      2. Erster Test
      3. Erster React-Test
      4. Die <Button>-Komponente testen
      5. <Actions> testen
      6. Mehr simulierte Interaktionen
      7. Vollständige Interaktionen testen
      8. Abdeckung
  14. 8 Flux
    1. Die Idee
    2. Ein anderer Blick auf Whinepad
    3. Der Store
      1. Store-Events
      2. Den Store in <Whinepad> verwenden
      3. Den Store in <Excel> verwenden
      4. Den Store in <Form> verwenden
      5. Die Grenze definieren
    4. Actions
      1. CRUD-Actions
      2. Suchen und sortieren
      3. Die Actions in <Whinepad> einsetzen
      4. Die Actions in <Excel> verwenden
    5. Zusammenfassung
    6. Immutable
      1. Immutable Store Data
      2. Daten ändern in immutablen Strukturen
  15. Index
  16. Über den Autor