Latihan 2: Props Svelte — Svelte

Latihan 2 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 dua prop. Kode awal cuma berisi komentar TODO.

Di <script>, deklarasikan prop wajib export let nama, tanpa nilai awal.
Di bawahnya, deklarasikan export let pesan = "Selamat datang", prop dengan nilai bawaan Selamat datang.
Di markup, tulis satu paragraf <p>{pesan}, {nama}!</p>.

Latihan ini menjalankan komponenmu tanpa induk yang mengirim apa pun, jadi pesan memakai nilai bawaannya dan paragrafnya tampil Selamat datang, undefined!. Itu benar: nama memang gak dikirim.

Yang dicek:

Halaman punya elemen <p>.
Kodenya berisi export let nama.
Kodenya berisi export let pesan.
<p> benar-benar menampilkan Selamat datang, jadi nilai bawaannya harus ditulis di deklarasi dan {pesan} harus dibaca di paragraf.

Hint

Prop wajib dan prop bernilai bawaan dideklarasikan dengan cara yang sama, bedanya cuma ada tidaknya nilai awal.
Nilai bawaannya ditulis di deklarasi propnya dengan tanda sama dengan. Paragrafnya membaca pesan dulu, lalu koma, lalu nama, lalu tanda seru.
<script> export let nama export let pesan = "Selamat datang" </script> <p>{pesan}, {nama}!</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Props Svelte — Svelte

Hint

Memperbarui Aplikasi