Kurs · Modul 294
Frontend einer interaktiven Webapplikation realisieren
Nach diesem Kurs baust du das Frontend einer Webapplikation selbstständig: Du schreibst modernes JavaScript, reagierst mit Event-Delegation und Debounce effizient auf Eingaben, lädst Daten per fetch von einer REST-API und behandelst Lade-, Leer- und Fehlerzustände, CORS und sich überholende Anfragen sauber. Du zerlegst Oberflächen in React-Komponenten mit TypeScript, platzierst State begründet (lokal, Elternkomponente, Context, URL oder Server), baust Formulare mit verständlicher Validierung und Doppelklick-Schutz und lieferst eine Single-Page-Application mit Routing und Umgebungsvariablen so aus, dass direkte Links funktionieren. Du lernst in 9 Lektionen am durchgehenden Beispiel des Kurskatalogs der Linguaplus Sprachschulen in St. Gallen, übst in 15 Code-Laboren direkt im Browser, baust im geführten Projekt ein Firmenkunden-Portal in fünf Meilensteinen und prüfst dich in einer Simulation des Kompetenznachweises. Rechne mit rund 30 Stunden. Der Kurs wirkt, wenn du die Labore und das Projekt selbst durchziehst; Lesen allein ersetzt das Programmieren nicht.
Dein nächster Schritt
Modernes JavaScript für das Frontend
Du schreibst Frontend-Code mit const, Arrow-Functions, Template-Strings, Destructuring und Spread und verarbeitest Kursdaten sicher mit filter, map, toSorted und reduce. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · DOM und Events | 0% | – | – |
| B · Daten von APIs | – | – | – |
| C · Komponenten und Zustand | – | – | – |
| D · Formulare | – | – | – |
| E · SPA, Routing und Build | – | – | – |
Abzeichen
Lektionen
- 1Modernes JavaScript für das FrontendDu schreibst Frontend-Code mit const, Arrow-Functions, Template-Strings, Destructuring und Spread und verarbeitest Kursdaten sicher mit filter, map, toSorted und reduce.Gratis40 Min.
- 2DOM und Events: die Seite reagiertDu findest und veränderst Elemente im DOM, reagierst mit addEventListener auf Eingaben und baust eine Live-Suche nach dem render-Muster.40 Min.
- 3Effizient reagieren: Event-Delegation und DebounceDu verstehst Bubbling, behandelst Klicks auf viele Elemente mit einem einzigen Listener und verzögerst Suchen mit Debounce, damit die Seite flüssig bleibt.40 Min.
- 4Daten von der API: fetch, Promises und async/awaitDu rufst REST-Endpunkte mit fetch und async/await auf, prüfst den Status, kapselst Aufrufe in einem API-Modul und formst JSON in Anzeigedaten um.45 Min.
- 5Robust laden: Zustände, CORS und Anfragen, die sich überholenDu planst Lade-, Leer- und Fehlerzustände, verstehst und löst CORS-Fehler und verhinderst mit AbortController, dass veraltete Antworten angezeigt werden.45 Min.
- 6Komponenten mit React und ViteDu setzt ein React-Projekt mit Vite auf, schreibst Komponenten mit typisierten Props, renderst Listen mit key und entwirfst einen Komponentenbaum.45 Min.
- 7State: wo die Daten wohnenDu verwaltest Zustand mit useState und useReducer, aktualisierst unveränderlich, hebst State nach oben, lädst Daten mit useEffect und entscheidest zwischen Context, Store und URL.45 Min.
- 8Formulare: prüfen, senden, Fehler zeigenDu baust kontrollierte Formulare, validierst Eingaben mit verständlichen Meldungen, sendest per POST, verhinderst doppeltes Absenden und ordnest Serverfehler den Feldern zu.45 Min.
- 9SPA mit Routing, Build und DeploymentDu richtest Routen mit Parametern ein, hältst Filter in der URL, erzeugst einen Build mit Umgebungsvariablen und lieferst die SPA so aus, dass direkte Links funktionieren.45 Min.