Svelte für Einsteiger: Kurs zu Komponenten mit Svelte 5

Erste Komponente im Svelte-Playground und mit Vite

• Was Svelte ausmacht: Komponenten werden zu JavaScript kompiliert, das das DOM direkt ändert
• Ohne Installation starten: Beispiele im Playground auf svelte.dev ausprobieren und teilen
• Lokales Projekt mit Vite und der Vorlage svelte anlegen, npm run dev starten
• Dateiaufbau einer Komponente: Skriptblock, HTML-Markup und Styleblock in einer Datei
• Werte im Markup ausgeben: geschweifte Klammern, Ausdrücke und Textinterpolation
• Dynamische Attribute, Kurzschreibweise {src} und alt-Texte für Bilder
• Komponenten-Styles gestalten: CSS gilt nur innerhalb der eigenen Komponente
• Kindkomponenten importieren und verschachteln, Namen mit großem Anfangsbuchstaben
• HTML-Inhalte mit {@html} einfügen – und warum das ein XSS-Risiko sein kann
• Komponenten prüfen mit svelte-check und den A11y-Hinweisen des Compilers
• Svelte und SvelteKit abgrenzen: Routing, Serverlogik, Deployment – Vertiefung im Hauptseminar
• Übung: Visitenkarte aus Bild, Name und Kontaktzeile als eigene Komponente

Reaktivität mit Runes statt impliziter Zuweisungen

• Reaktiven Zustand deklarieren: let anzahl = $state(0) statt einfachem let
• Berechnete Werte mit $derived statt $:-Deklarationen
• Reaktive Anweisungen aus Svelte 4 durch $derived oder $effect ablösen
• Arrays und Objekte in $state direkt ändern: push, Eigenschaften, verschachtelte Werte
• Werte während der Entwicklung beobachten mit $inspect
• Svelte-4-Beispiele im Netz erkennen: export let, on:click, <slot>, $:
• Übung: Einkaufsliste mit Summenzeile, die sich bei jeder Eingabe neu berechnet

Props: Daten an Komponenten übergeben

• Props mit let { titel } = $props() empfangen statt mit export let
• Standardwerte für Props direkt in der Destrukturierung festlegen
• Props weiterreichen: Objekt mit {...daten} verteilen, Rest-Props mit ...rest
• Props mit JSDoc oder TypeScript beschreiben, damit der Editor Fehler anzeigt
• Übung: Produktkachel, die Preis, Rabatt und Bild über Props erhält

Logikblöcke im Markup

• Bedingte Anzeige mit {#if}, {:else} und {:else if}
• Listen ausgeben mit {#each}, Index und Destrukturierung der Einträge
• Schlüssel in {#each liste as eintrag (eintrag.id)}: warum Reihenfolgefehler sonst auftreten
• Leere Listen mit {:else} im each-Block abfangen
• Promises im Markup: {#await} mit Lade-, Ergebnis- und Fehlerzweig
• Komponente bei Wertwechsel neu aufbauen mit {#key}
• Übung: Wetterabfrage mit Ladeanzeige und Fehlermeldung über {#await}

Ereignisse in Svelte 5

• DOM-Ereignisse als Attribute: onclick, oninput, onkeydown statt on:click
• Inline-Handler als Pfeilfunktion und benannte Handler-Funktionen
• Ehemalige Modifikatoren selbst lösen: event.preventDefault(), onclickcapture
• Komponenten-Ereignisse als Callback-Props wie onspeichern statt createEventDispatcher
• Ereignisse durch mehrere Komponenten reichen: Callback als Prop weitergeben
• DOM-Ereignisse an das innere Element durchreichen per Rest-Props auf <button {...rest}>
• Ereignisse auf window und document mit <svelte:window> und <svelte:document>
• Übung: Bewertungssterne, die die gewählte Zahl an die Elternkomponente melden

Bindungen an Formulare und Elemente

• Texteingaben mit bind:value an $state koppeln
• Zahlenfelder und Schieberegler: type="number" und type="range" liefern Zahlen
• Checkboxen mit bind:checked, Zwischenzustand mit bind:indeterminate
• Radiobuttons und Checkbox-Gruppen mit bind:group
• Mehrzeilige Eingaben in <textarea> binden
• Auswahllisten mit <select bind:value> und Objekten als Optionswerten
• Mehrfachauswahl mit <select multiple> als Array
• Editierbare Inhalte: contenteditable mit bind:innerHTML oder bind:textContent
• Einträge in {#each}-Blöcken direkt binden und dabei die Liste ändern
• Audio und Video steuern: bind:currentTime, bind:paused, bind:duration
• Elementgrößen auslesen mit bind:clientWidth und bind:clientHeight
• DOM-Element referenzieren mit bind:this, z. B. für Canvas oder Fokus
• Werte an Kindkomponenten binden: Prop mit $bindable freigeben
• Komponenteninstanz mit bind:this ansprechen und exportierte Funktionen aufrufen
• Übung: Anmeldeformular für einen Kurs mit Termin, Optionen und Live-Vorschau

Lebenszyklus und Effekte

• onMount für Code, der erst nach dem Einfügen ins DOM laufen darf
• Aufräumen: Rückgabefunktion von onMount und onDestroy für Timer und Listener
• $effect.pre und $effect lösen beforeUpdate und afterUpdate ab
• Auf die DOM-Aktualisierung warten mit await tick()
• Wann ein Effekt nötig ist – und wann ein berechneter Wert genügt
• Übung: Chatfenster, das bei neuen Nachrichten automatisch nach unten scrollt

Gemeinsamer Zustand: von Stores zu Runes

• Zustand für mehrere Komponenten in .svelte.js-Dateien mit $state ablegen
• Exportierte Objekte statt Neuzuweisung: warum export let im Modul nicht reaktiv bleibt
• Abgeleitete Werte in Modulen mit $derived oder Getter-Funktionen
• Eigene Zustandsobjekte als Klasse mit $state-Feldern und Methoden
• Formularfelder direkt an gemeinsamen Zustand binden
• Bestehende Stores verstehen: writable, readable und das $-Präfix
• Übung: Warenkorb-Zähler, den Kopfzeile und Produktliste gemeinsam nutzen

Bewegung und Übergänge

• Zahlen weich animieren mit den Klassen Tween und Spring aus svelte/motion
• Elemente ein- und ausblenden mit transition:fade und transition:fly
• Dauer, Verzögerung und Easing-Funktionen als Parameter
• Getrennte Ein- und Ausblendung mit in: und out:
• Eigener CSS-Übergang: Funktion, die css mit Zeitparameter liefert
• Eigener JavaScript-Übergang mit tick, etwa für einen Schreibmaschineneffekt
• Auf Start und Ende reagieren: onintrostart, onoutroend und verwandte Ereignisse
• Übergänge sind in Svelte 5 lokal; mit |global auch beim Ein- und Ausblenden der Eltern
• Elemente zwischen zwei Listen wandern lassen mit crossfade
• Bewegung reduzieren mit prefersReducedMotion, denn CSS-Regeln für prefers-reduced-motion greifen hier nicht

Animationen, Aktionen und Attachments

• Neu sortierte Listen mit animate:flip flüssig umordnen
• Aktionen mit use: für Verhalten am DOM-Element, z. B. Klick außerhalb
• Parameter an Aktionen übergeben und auf Änderungen reagieren
• Attachments mit {@attach} als neuere Alternative zu Aktionen
• Übung: Kanban-Spalten mit animiertem Verschieben der Karten

Klassen und Stile dynamisch setzen

• Klassen abhängig vom Zustand setzen mit class:aktiv={istAktiv}
• Kurzform class:aktiv, wenn Klasse und Variable gleich heißen
• Klassen als Objekt oder Array im class-Attribut (ab Svelte 5.16)
• Inline-Stile mit Ausdrücken im style-Attribut
• Einzelne Eigenschaften und CSS-Variablen über style:farbe={wert} setzen
• Übung: Schalter für Hell- und Dunkelmodus mit Klassen und CSS-Variablen

Komposition mit Snippets

• Kindinhalt mit children empfangen und mit {@render children()} ausgeben
• Ersatzinhalt, wenn nichts übergeben wird: {#if children} mit {:else}
• Mehrere Bereiche wie Kopf und Fuß als benannte Snippet-Props
• Snippets mit Parametern statt Slot-Props und let:-Direktive
• Übung: Dialogfenster mit austauschbarem Titel, Inhalt und Schaltflächen

Mit einem Coding-Agenten Svelte lernen

• Agent erklärt die Compiler-Ausgabe einer eigenen Komponente aus dem Playground
• Vorgegebene Regel im Prompt: nur Runes, onclick und Snippets – Svelte-4-Vorschläge zurückweisen
• Übungsvarianten erzeugen lassen, z. B. dieselbe Liste mit {#each}, Schlüssel und animate:flip
• Agent schlägt Bindungen und Übergänge vor; Ergebnis im Browser und mit svelte-check prüfen
• Fehlermeldungen des Svelte-Compilers gemeinsam mit dem Agenten deuten statt Code raten lassen

Praxisprojekt: Quiz-App für den Vereinsabend

• Fragenkarten als Komponenten mit Props, Antwortauswahl per bind:group
• Punktestand und Fortschritt als gemeinsamer Zustand mit $state und $derived
• Richtig-/Falsch-Rückmeldung mit Übergängen und animierter Bestenliste
• Fragen aus einer JSON-Datei laden und als statische Seite mit Vite bauen