Durchstarten mit React

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