Latihan 1 dari materi Props Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Buat komponen yang menerima nama dari induknya lalu menyapanya. Kode awal cuma berisi dua komentar TODO.
Di <script>, deklarasikan prop dengan export let nama. Tanpa export, induknya gak bisa mengisinya.
Di markup, tulis <h2>Halo, {nama}!</h2>. Namanya dibaca dari prop di dalam kurung kurawal, bukan diketik.
Latihan ini menjalankan komponenmu tanpa induk yang mengirim nama, jadi pratinjaunya menampilkan Halo, undefined!. Itu wajar, karena yang diperiksa kodenya.
Yang dicek:
Halaman punya elemen <h2>.
Kodenya berisi export let.
Isi <h2> memakai kurung kurawal, bukan nama yang diketik langsung.
Prop yang dideklarasikan dengan export let itu benar-benar dibaca di dalam kurung kurawal, misalnya {nama}.
Hint
Nilai yang datang dari induk harus dideklarasikan sebagai prop, yaitu variabel dengan kata export di depannya.
Di script tulis export let lalu nama propnya. Di markup, h2-nya merangkai Halo, lalu prop itu di dalam kurung kurawal, lalu tanda seru.
<script> export let nama </script> <h2>Halo, {nama}!</h2>
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...