Latihan 1: Custom Primitives — SolidJS

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

Kode awal cuma punya impor createSignal dan App dengan <div> kosong. Lalu:

Di luar App, tulis function createCounter(initial = 0). Di dalamnya buat const [count, setCount] = createSignal(initial), lalu kembalikan { count, increment, decrement, reset }: increment menambah 1, decrement mengurangi 1, reset mengembalikan ke initial.
Di dalam App, tulis const counter = createCounter(0).
Di dalam <div>, tulis <p>Count: {counter.count()}</p>, lalu tiga tombol dengan urutan ini: <button onClick={counter.increment}>+</button>, <button onClick={counter.decrement}>-</button>, <button onClick={counter.reset}>Reset</button>.

Yang dicek:

Ada paling sedikit 3 tombol, dan <p> berbunyi persis Count: 0 di awal.
Kodemu memuat createCounter, increment, decrement, dan reset.
Klik tombol pertama: Count: 1.
Dari awal, klik -: Count: -1, lalu klik Reset: kembali Count: 0.

Hint

Custom primitive adalah fungsi biasa yang membuat signal di dalamnya, lalu mengembalikan pembacanya beserta fungsi-fungsi pengubahnya.
createCounter membuat [count, setCount] dari createSignal(initial) dan mengembalikan objek berisi count, increment, decrement, reset. App memanggilnya sekali, menampilkan counter.count() di <p>, dan memberi tiap tombol satu fungsi itu.
return { count, increment: () => setCount((c) => c + 1), decrement: () => setCount((c) => c - 1), reset: () => setCount(initial) }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Custom Primitives — SolidJS

Hint

Memperbarui Aplikasi