Why Astro supports multiple frameworks - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a React component in Astro.

Astro

import MyComponent from '[1]';

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

A./MyComponent.jsx

BMyComponent.vue

CMyComponent.svelte

DMyComponent.ts

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a Vue or Svelte file extension for a React component.

Astro supports importing React components using the .jsx extension.

2fill in blank

medium

Complete the code to use a Svelte component inside an Astro page.

Astro

<SvelteComponent client:[1] />

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

Aonly

Bvisible

Cidle

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load which loads immediately, not lazily.

The client:visible directive loads the component when it becomes visible in the viewport.

3fill in blank

hard

Fix the error in this Astro component import statement.

Astro

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

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

Ajs

Bts

Cjsx

Dvue

Attempts:

3 left

💡 Hint

Common Mistakes

Using .js or .ts which may not work for React components.

React components in Astro typically use the .jsx extension.

4fill in blank

hard

Fill both blanks to create a dictionary of components with their frameworks.

Astro

const components = { '[1]': 'React', '[2]': 'Svelte' };

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

AButton

BInput

CCard

DModal

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing component names that don't match the framework.

Button is commonly a React component, Card can be a Svelte component here.

5fill in blank

hard

Fill all three blanks to complete the Astro frontmatter importing multiple frameworks.

Astro

---
import ReactComp from './ReactComp.[1]';
import VueComp from './VueComp.[2]';
import SvelteComp from './SvelteComp.[3]';
---

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

Ajsx

Bvue

Csvelte

Dts

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing file extensions between frameworks.

React uses .jsx, Vue uses .vue, and Svelte uses .svelte extensions.