Fort- und Weiterbildung  /  February 20, 2019  -  February 22, 2019, 09.00 bis 17.00 Uhr

Seminar »React und Typescript«

In diesem Seminar lernen Sie die Grundlagen, die allen SPA-Libraries (wie React oder Angular) zugrunde liegen, sowie die Besonderheiten von React kennen. Am Ende sind sie in der Lage, Anwendungen verschiedenster Komplexität mit React umzusetzen. Der Einsatz von TypeScript in dieser Schulung bietet eine bessere Unterstützung durch die Entwicklungsumgebung und führt zu qualitativ hochwertigem Code.

Inhalt

Entwicklung moderner Frontend-Anwendungen

  • Überblick und Gemeinsamkeiten von React, Angular, Vue.js
  • deklarative / datengetriebene Architektur
  • Komponenten - eigene HTML-Tags erstellen

Modernes JavaScript

  • Entwicklung mit node.js und npm
  • Neuerungen in ES2015-ES2018
  • Module
  • Pfeilfunktionen
  • Variablendeklaration mit let & const
  • Klassen-Syntax
  • Funktionale Programmierung (map, filter, ...)

TypeScript

  • Statische vs Dynamische Typisierung
  • Typendeklaration bei Variablen, Funktionen und Klassen
  • grundlegende Datentypen
  • Tupel, Objekte, Unions, Generics
  • Interfaces

React-Templatesprache

  • JavaScript-basierte Templatesyntax: JSX
  • Properties in JSX
  • Elemente wiederholen
  • if / else
  • events
  • CSS-Klassen und Stile

State (Anwendungszustand) verwalten

  • Festsetzen und ändern des Anwendungszustands
  • die Funktion _setState()_
  • Erfassen des Zustands von input-Elementen

Komponenten: Grundbausteine moderner Web-Anwendungen

  • Komponenten: Eigene HTML-Tags in React definieren
  • Funktionale Komponenten & Klassenkomponenten
  • State, Props & Events
  • Datenfluss zwischen Komponenten
  • Lifecycle-Events
  • Performanceoptimierung mit Pure Components
  • Vorgefertigte Komponenten einbinden

Testen von React-Anwendungen

  • Testen von JavaScript-Funktionen mit Jest
  • Testen von React-Komponenten mit Snapshot-Tests

React Router

  • Client-seitiges Routing
  • Anzeigen verschiedener Ansichten basierend auf der Route

State Management mit Redux

  • State Managment mit Redux in komplexen Anwendungen
  • Datenverwaltung mit reinen Funktionen und Reducern
  • Kombinieren von Reducern
  • React-Redux Anbindung mittels connect()