# Grundkonzepte von Svelte 5

Svelte 5 führt mit den sogenannten *Runes* eine neue, klare Art ein, mit Reaktivität umzugehen.

- <span class="s1">$state()</span> für reaktiven Zustand
- <span class="s1">$derived()</span> für abgeleitete Werte
- <span class="s1">$effect()</span> für Nebenwirkungen (z. B. DOM-Manipulation)
- <span class="s1">$props()</span> für Props-Zugriff
- <span class="s1">$bindable()</span> für zwei-Wege-Bindung

Beispiel:

```
<script>
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
	Doppelt: {doubled}
</button>
```

<p class="callout info">Keine useState-Calls, keine riesige API – nur schlankes HTML &amp; JavaScript.</p>

TODO:

- Dateibenennung
- Import/Export von Komponenten/Modulen
- *Runes* im Detail
- TypeScript-Support