Latihan 1: Komposisi Komponen — React

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

Bikin komponen Card yang membungkus isi kiriman induknya. Kode awal sudah punya App yang me-render <Card><p>Konten kartu</p></Card>. Biarkan App begitu.

Card menerima prop children. Parameternya sudah ada: function Card({ children }).
Ganti return null jadi div dengan className="card", lalu taruh {children} langsung di dalamnya: <div className="card">{children}</div>.

Yang dicek: elemen .card ada, paragraf di dalamnya (.card p) berisi persis Konten kartu, dan di kodenya, { langsung menyusul tag pembuka div card. Artinya yang ditaruh di situ {children}, bukan paragraf yang diketik ulang.

Hint

Card adalah bingkai. Isinya datang dari App lewat prop khusus children, yang berisi apa pun di antara <Card> dan </Card>.
Card me-return satu div dengan className card, dan di dalam div itu cukup ditaruh {children}, bukan paragraf baru.
function Card({ children }) { return <div className="card">{children}</div> }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Komposisi Komponen — React

Hint

Memperbarui Aplikasi