Latihan 1: Effects — SolidJS

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

Kode awal punya App dengan <div> berisi <p>Count: 0</p> dan <button>+1</button>. Jadikan judul tab mengikuti hitungan:

Baris import { createSignal, createEffect } from "solid-js" boleh ditulis di paling atas.
Di awal App, buat signal mulai dari 0: const [count, setCount] = createSignal(0).
Di bawahnya, buat efek yang menulis judul dokumen: createEffect(() => { document.title = `Count: ${count()}` }).
Ganti <p>Count: 0</p> jadi <p>Count: {count()}</p>. Biarkan dia <p> pertama di halaman.
Beri tombol +1 yang sudah ada onClick={() => setCount(c => c + 1)}. Biarkan dia tombol pertama di halaman.

Yang dicek:

Kodemu memanggil createEffect(...) dan createSignal(...).
Saat halaman tampil, judul dokumen (document.title, teks di tab) persis Count: 0, dan <p> berisi persis Count: 0.
Halaman punya <button>.
Sesudah tombol diklik sekali, judul dokumennya Count: 1, dan <p> berisi persis Count: 1.
Dari awal lagi, sesudah tombol diklik dua kali, judul dokumennya Count: 2.

Hint

Judul tab ada di luar tampilan komponen, jadi menulisnya adalah side effect. Efek di Solid jalan lagi sendiri tiap kali signal yang dibacanya berubah.
Buat signal count mulai dari 0. Di dalam createEffect, tulis document.title dengan count() di dalamnya. Tombol +1 memanggil setCount dengan nilai sebelumnya ditambah 1, dan paragrafnya membaca count().
createEffect(() => { document.title = `Count: ${count()}` }) lalu <p>Count: {count()}</p> dan <button onClick={() => setCount(c => c + 1)}>+1</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…