Latihan 1: Komponen Pertamamu — React

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

Kode awal punya dua function: Greeting yang masih kosong, dan App yang mengembalikan sebuah <div>. Biarkan nama keduanya dan <div> itu.

Di dalam Greeting, ganti comment // return JSX di sini dengan return <p>Selamat datang!</p>.
Di dalam <div> milik App, ganti comment {/* render Greeting di sini */} dengan <Greeting />.

Yang dicek: ada <p> dengan teks persis Selamat datang! (S kapital, tanda seru di akhir), ada komponen bernama Greeting (ditulis function Greeting atau const Greeting), dan App memakainya sebagai tag <Greeting />.

Hint

Komponen adalah function yang mengembalikan JSX. Tapi membuatnya saja belum cukup: dia baru tampil kalau dipakai sebagai tag di dalam App.
Ada dua tempat yang diisi: return di dalam Greeting, dan sebuah tag <Greeting /> di dalam <div> milik App.
function Greeting() { return <p>Selamat datang!</p> } lalu di App: <div><Greeting /></div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Komponen Pertamamu — React

Hint

Memperbarui Aplikasi