Einführung in React

Agenda Entwicklung moderner Frontend-Anwendungen

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

JavaScript Grundlagen für React

• Entwicklung mit node.js und npm
• Module (import und export)
• Pfeilfunktionen
• Funktionale Programmierung in JavaScript

TypeScript Grundlagen für React

• Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
• Type Aliases und Interfaces
• Type Assertions, Union Types, Generics

State (Anwendungszustand) verwalten

• Konzept der Immutability (Unveränderlichkeit)
• Festsetzen und Ändern des Anwendungszustands
• Arbeiten mit dem State-Hook in Funktionskomponenten
• Erfassen des Zustands von input-Elementen

JSX: die React-Templatesprache

• JavaScript-basierte Templatesyntax: JSX
• Binden von Inhalten und Properties
• Event-Handler
• CSS-Klassen und Stile
• if / else
• Elemente wiederholen

Komponenten: Grundbausteine moderner Web-Anwendungen

• Einbinden vorgefertigter Komponenten
• Definieren von Props in eigenen Komponenten
• Definieren von Events in eigenen Komponenten
• Datenfluss zwischen Komponenten
• Komponenten inspizieren mit den React Developer Tools
• Funktionskomponenten und Klassenkomponenten

Arbeiten mit Hooks

• Funktionsweise von Hooks in React
  Verwenden von eingebauten und externen Hooks

APIs aus React abfragen

• Senden von HTTP-Requests via fetch
• Verwenden der Libary react-query
• Verwenden des effect-Hooks, um HTTP-Requests auszulösen

React Router

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

Vertiefung und Ausblick

• Überblick: Context: Teilen von Daten über einen Komponentenbaum hinweg
• Überblick: Erstellen eigener Hooks
• Überblick: Libraries für Styling und Formulare

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Erfahrungen in JavaScript, HTML und CSS sind wünschenswert.

Zielgruppe

• Front-End-Entwickler