Choosing the right framework for each island in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React component correctly in Astro.

Astro

import MyComponent from '[1]';

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

AMyComponent.vue

B./MyComponent.js

C/components/MyComponent.tsx

D../components/MyComponent.jsx

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file extension like .js or .vue

Not using a relative path starting with ./ or ../

You import React components in Astro by specifying the relative path with the correct file extension, usually .jsx or .tsx.

2fill in blank

medium

Complete the code to render a Vue island in Astro.

Astro

<VueIsland client:[1] />

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

Avisible

Bidle

Cload

Dmedia

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load which hydrates immediately

Using client:idle which hydrates when the browser is idle

The client:visible directive tells Astro to hydrate the Vue island only when it becomes visible on the screen.

3fill in blank

hard

Fix the error in the Astro component usage by choosing the correct client directive.

Astro

<MyReactComponent client:[1] />

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

Aonly

Bhydrate

Cload

Dserver

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:only which only renders on client without SSR

Using client:server which is invalid

client:load is the correct directive to hydrate React components on the client side after page load.

4fill in blank

hard

Fill in the blank to create a Svelte island that loads only when idle.

Astro

<SvelteComponent client:[1] />

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

Aidle

B"idle"

C"load"

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load which hydrates immediately

Using client:visible which hydrates on scroll into view

The client:idle directive tells Astro to hydrate the Svelte island when the browser is idle.

5fill in blank

hard

Fill all three blanks to create a React island with props and client directive.

Astro

<MyComponent [1]=[2] client:[3] />

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

Atitle

B"Welcome"

Cload

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around string prop values

Using wrong client directive like client:visible here

This code passes a title prop with value "Welcome" and hydrates the React island on page load with client:load.