Choosing the right framework for each island in Astro - Mini Project: Build & Apply

Choosing the right framework for each island

📖 Scenario: You are building a simple website using Astro. Astro lets you use different JavaScript frameworks for small parts of your page, called islands. Each island can use React, Vue, or Svelte components. You want to set up your page with different islands using the right framework for each.

🎯 Goal: Create an Astro page that includes three islands: one React island, one Vue island, and one Svelte island. Each island will show a simple message. You will set up the data, configure which framework to use for each island, and then add the islands to the page.

📋 What You'll Learn

Create a data object with messages for React, Vue, and Svelte islands

Create a configuration variable that maps each island name to its framework

Use Astro's island syntax to render each framework component with the correct message

Complete the Astro page with all three islands included

💡 Why This Matters

🌍 Real World

Astro lets you build fast websites by mixing different JavaScript frameworks only where needed. This project shows how to set up multiple framework islands on one page.

💼 Career

Knowing how to use Astro islands with React, Vue, and Svelte is useful for frontend developers working on modern multi-framework web projects.

1

Set up the messages data object

Create a constant called messages that is an object with these exact entries: react with value 'Hello from React!', vue with value 'Hello from Vue!', and svelte with value 'Hello from Svelte!'.

Astro

// Create the messages object with react, vue, and svelte keys
// Your code here

Hint

Use const messages = { react: 'Hello from React!', vue: 'Hello from Vue!', svelte: 'Hello from Svelte!' }

2

Create the framework configuration

Create a constant called frameworks that is an object mapping react to 'React', vue to 'Vue', and svelte to 'Svelte'.

Astro

const messages = {
  react: 'Hello from React!',
  vue: 'Hello from Vue!',
  svelte: 'Hello from Svelte!'
};

// Create the frameworks object mapping each island to its framework
// Your code here

Hint

Use const frameworks = { react: 'React', vue: 'Vue', svelte: 'Svelte' }

3

Add islands with the correct framework components

Use Astro island syntax to add three islands: <ReactIsland client:load> with message messages.react, <VueIsland client:load> with message messages.vue, and <SvelteIsland client:load> with message messages.svelte. Assume the components are imported as ReactIsland, VueIsland, and SvelteIsland.

Astro

const messages = {
  react: 'Hello from React!',
  vue: 'Hello from Vue!',
  svelte: 'Hello from Svelte!'
};

const frameworks = {
  react: 'React',
  vue: 'Vue',
  svelte: 'Svelte'
};

// Add the three islands with their messages below
// Your code here

Hint

Use the island components with client:load and pass the correct message prop.

4

Complete the Astro page with imports and islands

Add import statements for ReactIsland from '../components/ReactIsland.jsx', VueIsland from '../components/VueIsland.vue', and SvelteIsland from '../components/SvelteIsland.svelte'. Then include the three islands with their messages as in step 3.

Astro

// Import the island components
// Your code here

const messages = {
  react: 'Hello from React!',
  vue: 'Hello from Vue!',
  svelte: 'Hello from Svelte!'
};

const frameworks = {
  react: 'React',
  vue: 'Vue',
  svelte: 'Svelte'
};

// Add the islands with messages
// Your code here

Hint

Remember to import each island component from its file before using it.