React und Typescript

Ziele

In diesem Kurs lernen Sie die Grundlagen, die allen SPA-Libraries (wie React oder Angular) zugrunde liegen, sowie die Besonderheiten von React kennen. Dadurch können Sie Anwendungen verschiedenster Komplexität mit React umzusetzen und dabei Best Practices zu berücksichtigen.

Der Einsatz von TypeScript bietet Ihnen eine bessere Unterstützung durch die Entwicklungsumgebung und führt so zu qualitativ hochwertigem Code.

Zielgruppe

Entwickler

Voraussetzungen

HTML und JavaScript Erfahrungen

Agenda

Entwicklung moderner Frontend-Anwendungen

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

Modernes JavaScript

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

TypeScript

• Vergleich statische und 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

Verwalten von State

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

Komponenten: Grundbausteine moderner Web-Anwendungen

• Komponenten um eigene HTML-Tags in React zu 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()