Latihan 1: Reactivity Lanjutan — SolidJS

Latihan 1 dari materi Reactivity Lanjutan di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya dua signal, count (mulai 0) dan name (mulai "Andi"), fungsi updateAll yang masih kosong, dan <p>{name()}: {count()}</p>. Biarkan semuanya, lalu:

Tambahkan batch ke impor dari "solid-js".
Isi updateAll dengan batch(() => { setCount((c) => c + 1); setName("Budi") }).
Di bawah <p>, tambahkan <button onClick={updateAll}>Update</button>.

Yang dicek:

Kodemu memuat batch, dan ada <button>.
Sebelum diklik, <p> berbunyi persis Andi: 0.
Sesudah satu klik, <p> berbunyi Budi: 1. Sesudah dua klik, Budi: 2.

Hint

batch menggabungkan beberapa perubahan signal jadi satu putaran, jadi tampilan dan efek cuma diperbarui sekali sesudah semuanya berubah.
Di dalam updateAll, panggil batch dengan sebuah fungsi yang memanggil setCount dengan nilai lama ditambah satu dan setName dengan Budi. Lalu buat tombol yang onClick-nya updateAll.
const updateAll = () => { batch(() => { setCount((c) => c + 1); setName("Budi") }) } dan <button onClick={updateAll}>Update</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Reactivity Lanjutan — SolidJS

Hint

Memperbarui Aplikasi