Latihan 1: Memos — SolidJS

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

Kode awal sudah mengimpor createSignal dan punya App dengan const [count] = createSignal(3) dan <div> kosong. Tampilkan hitungan dua kali lipatnya lewat memo:

Tambahkan createMemo ke baris import: import { createSignal, createMemo } from "solid-js".
Di bawah signal, buat memo: const doubled = createMemo(() => count() * 2).
Di dalam <div>, tambahkan <p>{count()} x 2 = {doubled()}</p>.

Yang dicek:

<p> berisi persis 3 x 2 = 6.
Kodemu memanggil createMemo(...).
Memonya ditampilkan di JSX sebagai {doubled()} (nama memonya, dengan kurung, di dalam kurung kurawal). Angka yang diketik langsung, seperti <p>3 x 2 = 6</p>, gak lolos.

Hint

Memo adalah nilai turunan yang di-cache: dihitung dari signal, disimpan, dan cuma dihitung ulang kalau signal itu berubah. Dibacanya dengan kurung, seperti signal.
Import createMemo, buat const doubled = createMemo(...) yang mengembalikan count() dikali 2, lalu tampilkan count() dan doubled() di satu paragraf.
const doubled = createMemo(() => count() * 2) lalu return <div><p>{count()} x 2 = {doubled()}</p></div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Memos — SolidJS

Hint

Memperbarui Aplikasi