Latihan 1: Komponen Solid — SolidJS

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

Kode awal punya App yang mengembalikan <div> kosong. Buat dua komponen, lalu pakai keduanya di sana:

Di atas App, buat function Header() yang me-return <header> berisi <h1> yang berbunyi persis Hyper Sheets.
Buat function Footer() yang me-return <footer> berisi <p> yang berbunyi persis © 2026. Simbol © boleh disalin dari sini, atau ditulis ©.
Di dalam <div> milik App, pakai keduanya sebagai komponen: <Header /> lalu <Footer />. Jangan ketik ulang isinya di App.

Yang dicek:

Halaman punya elemen <header> dan elemen <footer>.
<h1> berisi persis Hyper Sheets.
<p> di dalam <footer> berisi persis © 2026.
Kodemu memakai <Header /> dan <Footer />.

Hint

Dua bagian halaman berarti dua fungsi komponen, masing-masing me-return JSX-nya sendiri. App cuma merakit keduanya.
Header me-return tag header berisi h1, Footer me-return tag footer berisi p. Di dalam div milik App, tulis Header dan Footer sebagai tag yang menutup dirinya sendiri.
function Header() { return <header><h1>Hyper Sheets</h1></header> } function Footer() { return <footer><p>© 2026</p></footer> } lalu di App: <div><Header /><Footer /></div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Komponen Solid — SolidJS

Hint

Memperbarui Aplikasi