Svelte components in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using Svelte components inside an Astro project?

Svelte components let you build interactive parts of your website with a simple, reactive framework, while Astro handles the overall page structure and static content efficiently.

beginner

How do you import a Svelte component into an Astro file?

Use the syntax: <code>import ComponentName from './ComponentName.svelte';</code> at the top of your Astro file.

beginner

How do you include a Svelte component in the Astro page template?

After importing, use the component as a tag like <ComponentName /> inside the Astro file's HTML section.

intermediate

What is a key benefit of using Svelte components in Astro compared to plain HTML?

Svelte components provide reactivity and interactivity with less code and better performance, while Astro optimizes loading by only sending needed JavaScript.

intermediate

Can you pass props to a Svelte component inside Astro? How?

Yes, pass props like HTML attributes: <ComponentName prop1="value" />. The Svelte component receives them as usual props.

How do you add a Svelte component to an Astro page?

A Convert Svelte to HTML manually before use

B Write Svelte code directly inside Astro without import

C Use a special Astro directive without import

D Import it and use it as a tag in the Astro file

You import the Svelte component at the top of the Astro file and then use it as a tag in the template.

What file extension do Svelte components use?

A .svelte

B .astro

C .jsx

D .vue

Svelte components always use the .svelte file extension.

Which of these is a benefit of using Svelte components in Astro?

A They require no JavaScript at all

B They make the whole site static with no interactivity

C They allow reactive UI with minimal JavaScript sent to the browser

D They replace Astro's HTML rendering

Svelte components provide reactive UI and Astro optimizes JavaScript delivery for performance.

How do you pass data to a Svelte component in Astro?

A Using HTML attributes on the component tag

B Using global variables only

C You cannot pass data to Svelte components in Astro

D By editing the Svelte file directly

Props are passed as attributes on the component tag, just like HTML attributes.

What happens if you don't import a Svelte component before using it in Astro?

A Astro automatically finds and imports it

B You get a build error because the component is unknown

C The component renders as plain HTML

D The component works but without interactivity

Astro requires explicit imports; missing imports cause build errors.

Explain how to use a Svelte component inside an Astro page from import to rendering.

Think about how you bring a component in and then place it in the page.

Describe the benefits of combining Svelte components with Astro for building websites.

Consider what each tool does best and how they work together.