Latihan 1: Higher-Order Components — React

Latihan 1 dari materi Higher-Order Components di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tampilkan sapaan untuk Budi lewat komponen Greeting, lalu bungkus dengan HOC buatanmu sendiri. Gak perlu import apa pun.

Lengkapi Greeting({ nama }) supaya mengembalikan <p id="greeting">Halo, {nama}!</p>. Rakit sapaannya dari prop nama di dalam kurung kurawal, jangan ketik Halo, Budi! utuh.
Tulis HOC withWrapper(Component) yang mengembalikan komponen baru. Komponen baru itu merender <div id="wrapper"> berisi <Component {...props} />.
Di luar komponen, buat const GreetingWithWrapper = withWrapper(Greeting).
Ganti isi App jadi return <GreetingWithWrapper nama="Budi" />.

Yang dinilai:

Teks #greeting persis Halo, Budi!.
Ada elemen #wrapper di halaman.
App merender komponen hasil HOC dengan prop nama=, misalnya <GreetingWithWrapper nama="Budi" />.
Komponennya dibuat dengan withWrapper(Greeting), dan komponen yang dikembalikan HOC meneruskan props-nya dengan {...props}.
Isi <p id="greeting"> memakai kurung kurawal untuk prop-nya.

Hint

HOC adalah function yang menerima komponen dan mengembalikan komponen baru. Komponen baru itu merender kerangkanya, lalu komponen asli di dalamnya dengan semua props yang dia terima.
Strukturnya: function withWrapper(Component) { return function WithWrapper(props) { return <div id="wrapper"><Component {...props} /></div> } }. Panggil sekali di luar komponen, simpan di GreetingWithWrapper, lalu App merender komponen itu dengan nama="Budi".
Greeting: return <p id="greeting">Halo, {nama}!</p>. Di luar komponen: const GreetingWithWrapper = withWrapper(Greeting). Di App: return <GreetingWithWrapper nama="Budi" />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Higher-Order Components — React

Hint

Memperbarui Aplikasi