Latihan 2: Komponen Pertamamu — React

Latihan 2 dari materi Komponen Pertamamu di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya tiga function: Header, Footer, dan App. Biarkan nama ketiganya, lalu isi:

Header mengembalikan <header> yang berisi <h1>Hyper Sheets</h1>.
Footer mengembalikan <footer> yang berisi <p>© 2026</p>. Simbol © boleh diketik langsung atau ditulis ©.
Di dalam <div> milik App, ganti comment-nya dengan <Header /> lalu <Footer />.

Yang dicek: ada <header> dan <footer> di halaman, <h1> di dalam header berisi persis Hyper Sheets, <p> di dalam footer berisi persis © 2026, ada komponen bernama Header dan Footer (function atau const), dan App memakai <Header /> serta <Footer />.

Hint

Dua komponen terpisah, masing-masing mengembalikan satu elemen pembungkus (header atau footer) yang berisi satu elemen teks.
Isi return di Header dan Footer, lalu pakai keduanya sebagai tag di dalam <div> milik App. Namanya tetap diawali huruf kapital.
function Header() { return <header><h1>Hyper Sheets</h1></header> } function Footer() { return <footer><p>© 2026</p></footer> } lalu di App: <Header /> dan <Footer />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Komponen Pertamamu — React

Hint

Memperbarui Aplikasi