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

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

Flux-Architecture und Redux

  • Architektur
  • Unidirektionaler Datenfluss mit Flux / Redux
  • Redux in der Praxis

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 ES2015 / ES6 / ES7

  • Block-Scope
  • Template Strings
  • Destructing
  • Classes
  • Statics
  • Object-Literal extensions
  • Modules, Exports and Imports
  • Arrow-Functions
  • Default- und Rest-Parameters
  • Spread-Operator für Objekte und Arrays
  • Promises
  • Async / Await

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 Mike Bild lautet „Stück für Stück zu etwas Großem. Das ist für mich emergentes Design“. 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