React und Flux

Ziele

In der Schulung "React & Flux" lernen Entwickler, wie sie mit React.js und Flux komplexe Anwendungen erstellen.

Der Kurs beginnt mit einer eingehenden Untersuchung von Flux. Danach werden Konzepte wie Data Flow, Dispatcher, Stores, Views und Actions behandelt. Der Kurs schließt mit einer Diskussion darüber, wie man React- und Flux-basierte Anwendungen richtig testet.

Zielgruppe

JavaScript- und Front-End-Entwickler mit React-Erfahrung, die Flux erlernen möchten.

Voraussetzungen

Ein grundlegendes Verständnis von React.

Agenda

React und ES2015

• ES2015-Funktionen, die sich auf React auswirken
  Komponenten mit ES2015 erstellen
  Verwendung von Babel für ES2015 und JSX
  Verwendung von WebPack mit React
  Immutable.js verwenden

Fortgeschrittene React-Komponenten

• Component Life-Cycle
• Virtual DOM
• Events
• State Machines
• Compositions
• Communication zwischen Components
• Reusable Components
• Cloning Components

Einführung in Flux

• Wichtige Flux-Konzepte
• Actions
• Dispatchers
• Stores
• Flows

Erste Flux-Anwendung

• Organisieren Sie Ihren Code und verstehen Sie das mentale Modell
• Erstellen Ihrer Hello World
• AJAX und Web Sockets einbinden
• Verstehen Sie den Zweck und das Design
• Rückrufe und der Dispatcher

Speicher

• Verstehen des Zwecks von Stores
• Verknüpfung von Stores mit dem Dispatcher

Komponenten

• Wie man sich mit Stores verbindet
• Wie man sich mit Aktionen verbindet

Redux

• Unterschiede zwischen Redux und Flux
• Reducer-Funktionen
• Arbeiten mit einem Store
• Vorteile und Nachteile von Redux

Arbeiten mit dem DOM

• DOM-Elemente referenzieren
• DOM-Manipulation
• HTML5 Drag and Drop

Node.js und Server-DOM-Manipulation

Unit-Tests mit TestUtils

• Unit-Tests mit Mocha, Chai und Sinon
• React Component Unit Tests mit Mocha und Chai schreiben
• Spionieren mit Sinon
• Testen von Komponenten
• Testen von DOM Manipulationen
• Testen von Eigenschaften und State
• Events simulieren