React.js / Redux

React – JavaScript-Webframework für die Ausgabe von User-Interface-Komponenten

React ist ein von Facebook entwickeltes komponentenorientiertes JavaScript UI-Framework. Facebook hat im Jahr 2013 React als Open-Source veröffentlicht und gewinnt seitdem an stark zunehmender Bedeutung in der Web-Entwicklung. Nicht nur Facebook selbst verwendet React, auch auf anderen großen Plattformen wie Instagram, Netflix, Airbnb oder das Wall Street Journal wird React mit großem Erfolg für Web-Anwendung auf Client- und Server-Seite eingesetzt.

In diesem Workshop lernen Sie die Architektur, das Programmiermodell und Werkzeuge für den sicheren Umgang mit Facebooks Open-Source UI-Framework React kennen.

Grundlagen

  • Einführung in React
    • Was ist React
    • Warum React
    • Demoanwendung

Auffrischen „next Gen“-Javascript

  • „let“ und „const“
  • Arrow Functions
  • Export & Imports
  • Arbeiten mit Klassen, Scopes, Block-Scope
  • Object Literal Extensions
  • „Spread“ & „Rest“ Operatoren, Defaults
  • Array Functions
  • Modules, Exports and Imports, Template Strings
  • Promises
  • Async / Await

Erstellen einer React.js-Anwendung

  • Unsere erste React-Anwendung
  • Kurzeinführung JSX
  • Komponentenorientierung
  • Build und Deployment mithilfe von Webpack
  • Schritt für Schritt in die Praxis

Vertiefung in JSX

  • JavaScript-Ausdrücke in JSX
  • Bedingtes Rendern
  • Listen
  • Styles
  • Rendern von DOM-Elementen
  • Erstellen von „smart“ oder „dumb“-Komponenten

React-Komponenten

  • Funktionen vs. Klassen
  • Eigenschaften (Properties)
  • Zustand (State)
  • Lebenszyklus
  • Zugriff auf DOM-Elemente mit „refs“
  • Verwenden von Komponenten
  • Komponentenhierarchien
  • Arbeiten mit Kinderkomponenten
  • Listen

Event- und Datenbindung

  • Datenfluss
  • Auf Ereignisse reagieren
  • Kommunikation zwischen Komponenten

Formulare mit React

  • Datenbindung von Input-Elementen
  • „Controlled“-Komponenten
  • „Uncontrolled“-Komponenten

Remote Data Access

  • Server-Zugriff mit React und Fetch

React-Router

  • Links und Routes
  • Navigation und History
  • Hooks
  • Login
  • Routing wildcards und optionale Segmente

Server-Side React

  • Warum Server-Side React
  • ES2015 / ES6 / ES7 mit Babel
  • Build und Deployment
  • Universal Web-Apps mit React
  • Server-Side-Rendering und der React-Router
  • Zur Verfügung stellen von Initialzustand
  • Einführung in next.js

Flux-Architecture und Redux

  • Architektur
    • Action
    • Dispatcher
    • Store
    • View
  • Unidirektionaler Datenfluss mit Flux / Redux
  • Redux in der Praxis

React Hooks

  • Was Hooks sind
  • Der Einsatz von „useState“
  • Regeln von Hooks
  • Austausch von Daten zwischen Komponenten
  • Einsatz von useEffect(), useCallback(), useReducer(), useContext()
  • Erstellung und Verwendung eigener Hooks
  • Gemeinsame Verwendung von Hooks und Redux

Testen von React-Anwendungen

  • React Testwerkzeuge
  • Unit-, Component- und Integration-Tests
    • Testen im Browser
    • Testen außerhalb des Browsers
    • Testen in der Praxis

Einführung in React-Native

  • Grundlagen
  • Demo

Unsere Veranstaltungsorte von dieser / diesem Schulung, Training, Seminar, Kurs (nach oben): Berlin, Dresden, Frankfurt am Main, Hamburg, Hannover, Karlsruhe, Köln, Leipzig, Magdeburg, München, Stuttgart und Inhouse.

Fortbildung oder Weiterbildung zu React.js / Redux – wir setzen nur auf erfahrene Talente als React.js / Redux Trainer. Das Credo von Robert Meyer lautet „Mehr als Faktenwissen: Wissen gut und primär nachhaltig zu vermitteln“. Mehr zu ihm und den Beweggründen unserer anderen Trainer erfahren Sie bei seiner Biographie (direkt erreichbar per Bild). Eine alternative Schreibweise des Titels der Schulung ist React und Redux.

Nach oben