Der Kurs findet wie folgt statt:
- Kurstage:
- Mittwoch, 16.04.2025
- Donnerstag, 17.04.2025
- Dienstag, 22.04.2025
- Mittwoch, 23.04.2025
- Donnerstag, 24.04.2025
- Kurszeiten:
- Morgens zwischen 08:15 und 11:45 Uhr
- Nachmittags zwischen 13:00 und 16:45 Uhr
- Pausen:
- Morgens von 09:30 bis ~09:50 Uhr
- Nachmittags von 14:30 bis ~14:50 Uhr
1. Tag: Typisierung mit TypeScript
- Ich verstehe was Typisierung ist.
- Ich kenne die Vor- und Nachteil von Typisierung.
- Ich typisiere mit TypeScript.
- Ich kompiliere TypeScript zu JavaScript.
- Ich verwende Array Funktionen und den Spread Operator.
- Ich initialisiere ein React Projekt mit TypeScript.
- Ich erkenne die Unterschiede zwischen JSX und TSX.
- Ich typisiere Properties einer React Komponente.
| Zeitpunkt | Thema | Typ |
|---|
| 08:15 | Gemeinsamer Start in den Kurs | Plenum, Diskussion |
| 08:35 | Einrichten des TypeScript Compilers und erste Erlebnisse | Übung |
| 08:50 | Was ist eine Typisierung? Vor- und Nachteile | Vortrag |
| 09:10 | Was ist TypeScript? Wie funktioniert es? | Aufträge |
| 09:30 | Pause | Pause |
| 10:00 | Typesieren mit TypeScript | Vortrag, Aufträge |
| 11:45 | Mittag | Mittag |
| 13:00 | Type Inferencing | Demonstration, Aufträge |
| 13:20 | Array Funktionen repetieren | Aufträge |
| 14:30 | Pause | Pause |
| 14:50 | React TypeScript Projekt initialisieren | Demonstration, Aufträge |
| 15:30 | React Komponenten typisieren | Einführung, Aufträge |
| 16:30 | Kurstag rekapitulieren | Plenum |
2. Tag: React mit TypeScript
- Ich setze TypeScript Generics ein.
- Ich kenne die gänigsten TypeScript Helper Typen.
- Ich kenne React und dessen Umfeld.
- Ich gestalte Komponenten mit CSS Modules oder CSS-in-JS.
- Ich unterscheide zwischen Shadow DOM und einem Virtual DOM.
- Ich verschachlte (Compose Pattern) React-Komponenten.
- Ich nutze den
useState()-Hook und Events für Databinding.
- Ich verstehe den Lebenszyklus einer React-Komponente.
- Ich reagiere auf Veränderung mit dem
useEffect()-Hook.
| Zeitpunkt | Thema | Typ |
|---|
| 08:15 | Repetition zum ersten Kurstag | Plenum, Diskussion, Quiz |
| 08:30 | Helper Types und Generics | Vortrag, Aufträge |
| 09:30 | Pause | Pause |
| 09:50 | Gestalten von Komponenten mit CSS | Plenum, Aufträge |
| 11:45 | Mittag | Mittag |
| 13:00 | Verschachteln von React-Komponenten (Children, Pass-by-Prop) mit passender Typisierung | Demonstration, Aufträge |
| 13:45 | Wie funktioniert React? (Shadow DOM vs. Virtual DOM) | Demonstration, Vortrag |
| 14:00 | Lebenszyklus einer React-Komponente und Hooks | Vortrag, Aufträge |
| 14:30 | Pause | Pause |
| 15:00 | Eigene Komponenten umsetzen | Aufträge |
| 16:30 | Kurstag rekapitulieren | Plenum |
3. Tag: Lokales CRUD von Entitäten mit React
- Ich nutze geeignete Hilfsmittel (Prettier, ESLint, …) für React-Projekte.
- Ich teste einzelne React-Komponenten.
- Ich erfrage Benutzerdaten in Formularen.
- Ich validiere Benutzereingaben.
- Ich unterscheide zwischen Container und Components.
- Ich verwalte einen Application State mit dem
useContext()-Hook.
- Ich persistiere den Application State im Browser.
- Ich unterscheide zwischen den verschiedenen, persistenten Speicher in einem Browser.
| Zeitpunkt | Thema | Typ |
|---|
| 08:15 | Repetition zu letzten Woche | Plenum, Diskussion, Fragerunde |
| 08:45 | Quellcodequalität mit Prettier, ESLint und Tests sicherstellen | Demonstration, Auftrag |
| 09:30 | Pause | Pause |
| 10:00 | Theorie zu CRUD-Operationen mit React verstehen | Vortrag, Auftrag |
| 11:00 | Formulare mit React umsetzen | Auftrag |
| 11:45 | Mittag | Mittag |
| 13:00 | Eingaben validieren | Auftrag |
| 13:45 | Container und Components unterscheiden | Plenum |
| 14:00 | Application State mit useContext()-Hook verwalten | Vortrag, Auftrag |
| 14:30 | Pause | Pause |
| 15:00 | Application State mit useContext()-Hook verwalten (Fortsetzung) | Auftrag |
| 15:30 | Application State persistieren | Auftrag |
| 16:30 | Browser-Speicher unterscheiden und Rekapitulation vom Kurstag | Plenum |
4. Tag: CRUD von Entitäten über eine API
- Ich setze Reducer und Store Komponenten für meine Zwecke ein.
- Ich unterscheide zwischen Komponenten- und Applikationszuständen.
- Ich greife auf eine REST-API mit
fetch() zu.
- Ich setze einen API-Mock-Server für meine Zwecke ein.
- Ich entdecke APIs mit den passenden Hilfsmitteln (Postman, Hoppscotch, ..).
- Ich navigiere zwischen verschiedenen Seiten (Routing).
| Zeitpunkt | Thema | Typ |
|---|
| 08:15 | Übersicht wo wir stehen und was noch folgt | Plenum, Quiz |
| 08:30 | Rekapitulation zu REST-APIs mit fetch() | Plenum, Auftrag |
| 09:00 | Aufsetzen von Mock-Server als CRUD-Backend | Auftrag |
| 09:30 | Pause | Pause |
| 10:00 | Anbinden von React-Applikationen an REST-API | Demonstration, Auftrag |
| 11:45 | Mittag | Mittag |
| 13:00 | Anbinden von React-Applikationen an REST-API (Fortsetzung) | Auftrag |
| 14:00 | Routing umsetzen | Auftrag |
| 14:30 | Pause | Pause |
| 15:00 | React-Applikation nach Vorgaben implementieren | Challenge |
| 16:30 | Auswertung der Challenge und Abschluss des Kurstages | Plenum |
5. Tag: Workshop
- Ich kombiniere Komponenten aus fertigen Komponentenframeworks mit meinen eigenen Komponenten.
- Ich unterscheide zwischen klassischen Webapplikationen, SPAs und PWAs.
- Ich publiziere eine mit React erstellte PWA.
| Zeitpunkt | Thema | Typ |
|---|
| 08:15 | Unterschied zwischen klassischen Webapplikationen, SPAs und PWAs | Plenum |
| 08:30 | Vorgehen wie eine PWA mit React erstellt wird | Demonstration |
| 08:45 | Einführung in Workshop: Meine kleine React-PWA | Plenum |
| 09:00 | Workshop: Planungsphase | Einzelarbeit |
| 09:30 | Pause | Pause |
| 10:00 | Workshop: Umsetzungsphase | Einzelarbeit |
| 11:45 | Mittag | Mittag |
| 13:00 | Workshop: Umsetzungsphase | Einzelarbeit |
| 14:30 | Pause | Pause |
| 15:00 | Workshop: Überprüfungsphase | Einzelarbeit |
| 16:00 | Workshop: Publikationsphase | Einzelarbeit |
| 16:30 | Nächste mögliche Schritte mit React | Plenum |