Komponen Svelte (.svelte) terdiri dari tiga bagian: <script> (logika), markup HTML (template), dan <style> (style yang otomatis scoped ke komponen itu saja).
Setiap bagian UI yang berulang atau punya state sendiri layak jadi komponen. Pola ini menggantikan fungsi render panjang jadi file deklaratif.
svelte<script>
let nama = "Budi";
</script>
<h1>Halo {nama}</h1>
<style>
h1 { color
Kembali ke rujukan utama Svelte untuk melanjutkan topik lainnya.
h1 di atas hanya berlaku untuk komponen ini (Svelte menambahkan class hash).
svelte<!-- event -->
<button on:click={handler}>Klik</button>
<!-- conditional -->
{#if show}
<p>Terlihat</p>
{:else}
<p>Tersembunyi</p>
{/if}
<!-- list -->
{#each items as item (item.id)}
<li>{item.label}</li>
{/each}<input bind:value={nama} />
<p>Ketik: {nama}</p>{#each} wajib untuk list dinamis agar patch DOM benar (pakai id unik, bukan index).on: bisa di-shortcut onclick di Svelte 5, tapi on:click masih luas dipakai.:global().import Counter from './Counter.svelte'.<script> biar baca.bind:value={x} butuh let x.