Latihan 1: Svelte 5 Runes — Svelte

Latihan 1 dari materi Svelte 5 Runes di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal cuma berisi komentar TODO. Editor latihan meng-compile dengan Svelte 5 begitu kodemu memakai rune.

Di <script>, tulis let count = $state(0).
Di bawahnya, let double = $derived(count * 2).
Di luar <script>, tulis <p class="count">Count: {count}</p> dan <p class="double">Double: {double}</p>.
Tambahkan <button onclick={() => count += 1}>+1</button>.

Yang dicek:

p.count berisi persis Count: 0 dan p.double berisi persis Double: 0 saat halaman dibuka.
Setelah tombolnya diklik sekali, p.count berisi persis Count: 1 dan p.double berisi persis Double: 2.
Kodemu memakai $state( dan $derived(.

Hint

Svelte 5 menandai reaktivitas secara eksplisit: count adalah state yang berubah saat diklik, dan double adalah nilai yang selalu dihitung dari count.
Dua baris di script, satu dengan $state dan satu dengan $derived, lalu dua <p> dengan class count dan double, dan tombol +1 dengan atribut onclick.
let count = $state(0) let double = $derived(count * 2) lalu <p class="count">Count: {count}</p> <p class="double">Double: {double}</p> <button onclick={() => count += 1}>+1</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Svelte 5 Runes — Svelte

Hint

Memperbarui Aplikasi