Svelte components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Svelte component into an Astro file.

Astro

---
import MyComponent from './MyComponent.svelte';
---

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:only

Bclient:load

Cclient:idle

Dbind:value

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load instead of client:only.

Forgetting to import the Svelte component first.

Use client:only to load a Svelte component in Astro on the client side only.

2fill in blank

medium

Complete the code to pass a prop named 'title' with value 'Hello' to a Svelte component in Astro.

Astro

---
import Header from './Header.svelte';
---

<Header [1]="Hello" />

Drag options to blanks, or click blank then click option'

Aprop:title

Bbind:title

Ctitle

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:title which is for two-way binding.

Using prop:title which is not valid syntax.

Props are passed by naming them directly, like title="Hello".

3fill in blank

hard

Fix the error in the Astro code to correctly load a Svelte component only when the page is idle.

Astro

---
import Footer from './Footer.svelte';
---

<Footer [1] />

Drag options to blanks, or click blank then click option'

Aclient:visible

Bclient:load

Cclient:only

Dclient:idle

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load which loads immediately.

Using client:only which loads on client but not delayed.

The client:idle directive loads the component when the browser is idle.

4fill in blank

hard

Fill both blanks to import and use a Svelte component named 'Button' with client-side only rendering.

Astro

---
import [1] from './Button.svelte';
---

<[2] client:only />

Drag options to blanks, or click blank then click option'

AButton

Bbutton

CBtn

DbuttonComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or different names in the tag than the import.

Forgetting to add client:only directive.

The import name and the component tag must match exactly, here 'Button'.

5fill in blank

hard

Fill all three blanks to pass a 'label' prop with value 'Click me' and load the Svelte component 'Clickable' only on client load.

Astro

---
import [1] from './Clickable.svelte';
---

<[2] [3]="Click me" client:load />

Drag options to blanks, or click blank then click option'

AClickable

Blabel

Dclickable

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and tag.

Passing props with wrong attribute names.

Import and use the component with the same name 'Clickable' and pass the prop 'label'.