React und Typescript

React ist eine der meistverwendeten Libraries zum Erstellen von Single-Page-Anwendungen (SPAs). Der Kurs vermittelt die Grundlagen aller SPA-Libraries (wie React oder Angular) sowie die Besonderheiten von React. Dabei wird auf aktuelle Technologien, wie z.B. Hooks, eingegangen.

Ziel des Kurses ist es, Anwendungen verschiedenster Komplexität mit React umzusetzen und dabei Best Practices zu berücksichtigen. Der Einsatz von TypeScript in dieser Schulung bietet eine bessere Unterstützung durch die Entwicklungsumgebung und führt zu hochwertigem Code.

Der Kurs findet als virtuelles Präsenzseminar statt.

Entwicklung moderner Frontend-Anwendungen

• Überblick und Gemeinsamkeiten von React, Angular, Vue.js

• Deklarative / datengetriebene Architektur

• Komponenten – eigene HTML-Tags definieren

Modernes JavaScript

• Entwicklung mit node.js und npm

• Neuerungen in ES2015-ES2019

• Module

• Pfeilfunktionen

• Funktionale Programmierung (map, filter, …)

TypeScript

• Statische vs Dynamische Typisierung

• Typendeklaration bei Variablen, Funktionen, Arrays und Objekten

• Types und Interfaces

• Type Assertions, Union Types, Generics

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

• Arbeiten mit dem State-Hook in Funktionskomponenten

• Arbeiten mit setState() in Klassenkomponenten

• Erfassen des Zustands von input-Elementen

Komponenten: Grundbausteine moderner Web-Anwendungen

• Eigene HTML-Tags in React definieren

• Funktionskomponenten & Klassenkomponenten

• State, Props & Events

• Datenfluss zwischen Komponenten

• Vorgefertigte Komponenten einbinden

Testen von React-Anwendungen

• Testen von JavaScript-Funktionen mit Jest

• Testen von React-Komponenten mit React Testing Library

React Router

• Client-seitiges Routing

• Anzeigen verschiedener Ansichten basierend auf der Route

Arbeiten mit Hooks

• Erstellen eigener Hooks

• Funktionsweise von Hooks in React

• Der Effect-Hook für Side Effects

• Der Context-Hook

State Management mit Reducern und Redux

• State Management mit Reducern und reinen Funktionen

• Einsetzen des Reducer-Hooks in React

• Überblick über State Management mit Redux

Entwicklerinnen und Entwickler mit JavaScript-Erfahrung

• Computer mit Internetzugang, Mikrofon und Lautsprecher oder Headset, Kommunikationsprogramm (Skype, Zoom…)
• Grundkenntnisse in der Datenverarbeitung
• Sicherer Umgang mit dem Internet
• Erfahrung mit HTML und JavaScript

Mindestens zwei, höchstens acht Teilnehmende

Wochenendkurs
Sa. 09:00 – 17:00 Uhr
So. 09:00 – 17:00 Uhr