Why Astro components use a unique format - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an Astro component that renders a heading.

Astro

<h1>[1]</h1>

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

A<script>

Bconsole.log('Hello')

CHello from Astro

D{title}

Attempts:

3 left

💡 Hint

Common Mistakes

Putting JavaScript code inside the HTML tag

Using curly braces for static text

The heading text should be plain text inside the <h1> tag.

2fill in blank

medium

Complete the code to import a component in Astro.

Astro

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

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

AButton

Bbutton

Cbtn

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components

Mismatching import name and file name

Component names in Astro are PascalCase and must match the file name.

3fill in blank

hard

Fix the error in the Astro component script block.

Astro

---
const message = 'Welcome to Astro';
return <p>[1]</p>;
---

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

Amessage

B{message}

C{{message}}

D<p>{message}</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Using double curly braces like {{message}}

Not wrapping variable in braces

In Astro, to insert JavaScript variables in markup, use curly braces inside the HTML.

4fill in blank

hard

Fill both blanks to create a reactive variable and display it in Astro.

Astro

---
let count = 0;
function increment() {
  count [1] 1;
}
---
<button on:click={increment}>Click me</button>
<p>Count: [2]</p>

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

A+=

B-=

Ccount

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' instead of '+='

Displaying an expression instead of the variable

Use '+=' to add 1 to count, and display the variable 'count' inside the paragraph.

5fill in blank

hard

Fill all three blanks to create a component that accepts props and displays a greeting.

Astro

---
const { [1] } = Astro.props;
---
<h2>Hello, [2]!</h2>
<p>[3]</p>

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

Aname

C`Welcome to Astro, ${name}`

D'Welcome to Astro!'

Attempts:

3 left

💡 Hint

Common Mistakes

Using template literals directly in markup without backticks

Not destructuring props correctly

Destructure 'name' from props, display it in the heading, and show a static welcome message.

Practice

1. Why do Astro components use a unique format that combines JavaScript, HTML, and CSS in one file?

easy

A. To prevent using HTML inside components

B. To make building fast websites easier by loading less code

C. To separate styles into different files only

D. To force developers to write only JavaScript

Solution

1. Step 1: Understand Astro's design goal

   Astro aims to build fast websites by reducing unnecessary code sent to browsers.

2. Step 2: Recognize the benefit of combining code

   Combining JavaScript, HTML, and CSS in one file helps Astro optimize loading and keep components simple.

3. Final Answer:

   To make building fast websites easier by loading less code -> Option B

4. Quick Check:

   Unique format = faster websites [OK]

Hint: Unique format helps load less code for speed [OK]

Common Mistakes:

• Thinking Astro forbids HTML in components
• Believing styles must be in separate files
• Assuming only JavaScript is allowed

2. Which of the following is the correct way to start an Astro component file?

easy

A. ---
const name = 'Astro';
---

B. function Astro() { return <div>Hello</div>; }

C. <script>const name = 'Astro';</script>

D. import React from 'react';

Solution

1. Step 1: Identify Astro component syntax

   Astro components start with a frontmatter block enclosed by triple dashes --- for JavaScript.

2. Step 2: Compare options

   --- const name = 'Astro'; --- uses the correct frontmatter syntax; others use React or HTML script tags not used in Astro.

3. Final Answer:

   ---\nconst name = 'Astro';\n--- -> Option A

4. Quick Check:

   Astro frontmatter uses --- [OK]

Hint: Astro JS code is inside --- frontmatter [OK]

Common Mistakes:

• Using React import in Astro files
• Placing JS inside <script> tags instead of ---
• Writing functions like React components

3. Given this Astro component snippet:

---
const greeting = 'Hi';
---
<h1>{greeting}, Astro!</h1>

What will be rendered on the webpage?

medium

A. greeting, Astro!

B. <h1>{greeting}, Astro!</h1>

C. <h1>Hi, Astro!</h1>

D. Syntax error

Solution

1. Step 1: Understand frontmatter variable usage

   The variable greeting is defined in the frontmatter and used inside the HTML with curly braces.

2. Step 2: Evaluate rendering behavior

   Astro replaces {greeting} with its value 'Hi', so the output is <h1>Hi, Astro!</h1>.

3. Final Answer:

   <h1>Hi, Astro!</h1> -> Option C

4. Quick Check:

   Curly braces insert JS values [OK]

Hint: Curly braces show JS values in HTML [OK]

Common Mistakes:

• Thinking curly braces print as text
• Expecting syntax error from frontmatter
• Ignoring variable substitution

4. What is wrong with this Astro component code?

---
const title = 'Welcome'
---
<h1>{title}</h1>

medium

A. No error, code is correct

B. Curly braces should not be used in HTML

C. Frontmatter block is missing closing dashes

D. Missing semicolon after const declaration

Solution

1. Step 1: Check JavaScript syntax in frontmatter

   JavaScript allows omitting semicolons; this is valid syntax.

2. Step 2: Verify Astro frontmatter and usage

   The frontmatter is correctly closed with --- and curly braces are correct for inserting JS values.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   JS semicolons optional, Astro syntax valid [OK]

Hint: JS semicolons optional; frontmatter must be closed [OK]

Common Mistakes:

• Assuming missing semicolon causes error
• Thinking curly braces are invalid in Astro HTML
• Believing frontmatter is not closed properly

5. How does Astro's unique component format help improve website performance compared to traditional frameworks?

hard

A. By forcing all JavaScript to run on the client side

B. By requiring developers to write separate files for each part

C. By bundling all CSS into one large file loaded upfront

D. By sending only the needed HTML and minimal JavaScript to the browser

Solution

1. Step 1: Understand Astro's partial hydration

   Astro sends mostly static HTML and only loads JavaScript when needed, reducing load time.

2. Step 2: Compare with traditional frameworks

   Traditional frameworks often send large JavaScript bundles upfront, slowing page load.

3. Final Answer:

   By sending only the needed HTML and minimal JavaScript to the browser -> Option D

4. Quick Check:

   Less JS sent = faster load [OK]

Hint: Astro sends minimal JS, mostly HTML for speed [OK]

Common Mistakes:

• Thinking Astro runs all JS on client
• Believing CSS is bundled large upfront
• Assuming separate files improve performance