Latihan 1: Resources — SolidJS

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

Kode awal sudah punya fetchData, fungsi async yang mengembalikan { name: "Data Berhasil" }, dan App dengan <div> kosong. Biarkan fetchData, lalu:

Impor createResource, Suspense, dan Show dari "solid-js".
Di dalam App, tulis const [data] = createResource(fetchData).
Kembalikan <Suspense fallback={Loading...}> yang berisi <Show when={data()}>{data().name}</Show>.

Yang dicek:

Kodemu memuat createResource dan Suspense.
Setelah datanya siap, sebuah  memuat Data Berhasil.

Hint

createResource membungkus fungsi async dan memberi pembaca data yang dipanggil seperti signal. Suspense menampilkan fallback selama datanya belum siap.
Buat const [data] = createResource(fetchData). Bungkus tampilannya dengan Suspense yang fallback-nya paragraf Loading..., dan di dalamnya Show yang menunggu data() lalu menampilkan data().name di sebuah p.
<Suspense fallback={Loading...}><Show when={data()}>{data().name}</Show></Suspense>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Resources — SolidJS

Hint

Memperbarui Aplikasi