Latihan 2: Komposisi Komponen — React

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

Bikin komponen Layout dengan dua tempat isi. Parameternya sudah ada di kode awal: function Layout({ header, children }).

Layout me-return satu <div> berisi <header className="layout-header">{header}</header> dan <main className="layout-content">{children}</main>.
Di App, ganti komentarnya sehingga jadi persis:

<Layout header={<h1>Selamat Datang</h1>}>
  <p>Ini konten utama</p>
</Layout>

Yang dicek: .layout-header h1 berisi persis Selamat Datang, .layout-content p berisi persis Ini konten utama, ada function Layout, App memakai <Layout header=, dan Layout merender {header} dan {children}.

Hint

Prop gak harus teks atau angka. Prop header bisa membawa satu heading utuh, sedangkan isi di antara tag Layout datang lewat children.
Layout punya dua penampung yang dibungkus satu div: <header className="layout-header"> untuk {header} dan <main className="layout-content"> untuk {children}.
return (<div><header className="layout-header">{header}</header><main className="layout-content">{children}</main></div>), dan di App: <Layout header={<h1>Selamat Datang</h1>}><p>Ini konten utama</p></Layout>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Komposisi Komponen — React

Hint

Memperbarui Aplikasi