Latihan 1: Portals dan Dynamic — SolidJS

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

Kode awal punya App dengan signal tag yang mulai dari "h1", dan <div> kosong. Signal itu tetap. Isi <div>-nya:

Impor Dynamic dari "solid-js/web".
Di dalam <div>, render <Dynamic component={tag()}>Heading Dinamis</Dynamic>.
Di bawahnya, tambahkan satu tombol: <button onClick={() => setTag(t => t === "h1" ? "h2" : "h1")}>Toggle Tag</button>. Ini harus jadi <button> pertama di halaman.

Yang dicek:

Kodemu memuat Dynamic.
Ada <button> di halaman.
Sesudah tombol pertama diklik sekali, ada <h2> berisi persis Heading Dinamis.
Sesudah diklik dua kali, ada <h1> berisi persis Heading Dinamis lagi.

Hint

Yang ditukar jenis elemennya, bukan tulisannya: Dynamic menerima nama tag sebagai nilai lewat prop component.
Impor Dynamic dari solid-js/web, isi component dengan tag() (pakai kurung), lalu buat tombol yang menukar tag antara h1 dan h2, bolak-balik.
<Dynamic component={tag()}>Heading Dinamis</Dynamic> lalu <button onClick={() => setTag(t => t === "h1" ? "h2" : "h1")}>Toggle Tag</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Portals dan Dynamic — SolidJS

Hint

Memperbarui Aplikasi