What is Astro - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of Astro?

Astro is a modern web framework. What is its main goal?

A To build fast websites by sending less JavaScript to the browser

B To create mobile apps using native device features

C To design graphics and animations for websites

D To manage databases and server-side logic

💡 Hint

Think about what makes websites load faster and use less code on the client side.

Astro focuses on delivering minimal JavaScript to browsers, improving website speed and performance.

❓ component_behavior

intermediate

How does Astro handle components by default?

In Astro, what happens to components when the page loads in the browser?

A Components render to static HTML with no JavaScript sent unless specified

B All components automatically load full JavaScript on the client

C Components only work on the server and never appear in the browser

D Components require manual JavaScript imports for every interaction

💡 Hint

Consider how Astro optimizes for speed by default.

Astro renders components to static HTML by default, sending no JavaScript to the browser unless you add client-side interactivity.

📝 Syntax

advanced

Identify the correct Astro component syntax

Which of the following is the correct way to define a simple Astro component that displays a greeting?

A <Greeting>Hello!</Greeting>

B <script>export default function Greeting() { return <h1>Hello!</h1>; }</script>

C

---
const name = 'Friend';
---
<h1>Hello, {name}!</h1>

D <template><h1>Hello!</h1></template>

💡 Hint

Astro uses frontmatter with triple dashes for scripts and plain HTML for markup.

Astro components use frontmatter (---) for scripts and then HTML markup. Option C shows this pattern correctly.

❓ state_output

advanced

What will this Astro component render?

Given this Astro component code, what is the rendered output?

Astro

---
const count = 3;
---
<p>Count is {count}</p>

A <p>Count is {count}</p>

B <p>Count is 3</p>

C <p>Count is </p>

D <p>Count is undefined</p>

💡 Hint

Variables inside curly braces in Astro markup get replaced with their values.

The variable count is 3, so the output replaces {count} with 3.

🔧 Debug

expert

Why does this Astro component fail to render correctly?

Look at this Astro component code. Why does it cause an error?

Astro

---
const message = 'Hi there'
---
<h1>{message}</h1>

A Curly braces cannot be used inside Astro markup

B The variable message is not defined in the frontmatter

C The frontmatter block is missing closing triple dashes

D Missing semicolon after the message declaration causes a syntax error

💡 Hint

Check the JavaScript syntax inside the frontmatter block.

JavaScript inside frontmatter requires proper syntax, including semicolons. Missing semicolon can cause parsing errors.

Practice

1. What is the main purpose of Astro?

easy

A. To design desktop software

B. To create mobile apps only

C. To manage databases efficiently

D. To build fast websites by sending less code to the browser

Solution

1. Step 1: Understand Astro's goal

   Astro focuses on making websites load faster by reducing the amount of code sent to users' browsers.

2. Step 2: Compare options with Astro's purpose

   The options describing desktop software, mobile apps only, and database management are unrelated tasks, which Astro does not specialize in.

3. Final Answer:

   To build fast websites by sending less code to the browser -> Option D

4. Quick Check:

   Astro purpose = fast websites with less code [OK]

Hint: Astro is about fast websites with less browser code [OK]

Common Mistakes:

• Thinking Astro is for mobile apps
• Confusing Astro with database tools
• Assuming Astro builds desktop software

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

easy

A. <Component>Hello</Component> <script>export default {};</script>

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

C. <div>Hello</div>

D. <Component>Hello</Component>

Solution

1. Step 1: Identify Astro component structure

   Astro components combine HTML markup with a <script> block exporting default to define behavior.

2. Step 2: Check options for correct Astro syntax

   <Component>Hello</Component> <script>export default {};</script> shows HTML markup with a <script> exporting default, which is correct. <Component>Hello</Component> lacks script, B is React style, C is just HTML without component structure.

3. Final Answer:

   <Component>Hello</Component> <script>export default {};</script> -> Option A

4. Quick Check:

   Astro component = HTML + export default script [OK]

Hint: Astro components need HTML plus export default script [OK]

Common Mistakes:

• Using React function syntax instead of Astro
• Writing only HTML without export default
• Missing the script block in component

3. Given this Astro component code:

<script>
  export let name = 'Friend';
</script>

<h1>Hello, {name}!</h1>

What will be the rendered output if no props are passed?

medium

A. Hello, Friend!

B. Hello, !

C. Hello, {name}!

D. Error: name is undefined

Solution

1. Step 1: Understand default prop value in Astro

   The variable name has a default value 'Friend' if no prop is passed.

2. Step 2: Predict rendered output with default value

   Since no prop is passed, name remains 'Friend', so the output is <h1>Hello, Friend!</h1>.

3. Final Answer:

   <h1>Hello, Friend!</h1> -> Option A

4. Quick Check:

   Default prop used = Hello, Friend! [OK]

Hint: Default props show if no value passed [OK]

Common Mistakes:

• Assuming empty string if no prop
• Expecting error for missing prop
• Rendering literal {name} instead of value

4. Identify the error in this Astro component code:

<script>
  let count = 0;
</script>

<button onClick={() => count++}>Click</button>
<p>Count: {count}</p>

medium

A. The variable 'count' should be declared with 'export let' to update

B. The JSX arrow function syntax is invalid in Astro components

C. The event handler syntax should be 'on:click' instead of 'onClick' in Astro

D. Astro does not support buttons inside components

Solution

1. Step 1: Check event handler syntax in Astro

   Astro uses 'on:event' syntax, so 'onClick' is incorrect and should be 'on:click'.

2. Step 2: Verify other code parts

   Variable declaration is fine; arrow functions are allowed in event handlers; buttons are supported in Astro components.

3. Final Answer:

   The event handler syntax should be 'on:click' instead of 'onClick' in Astro -> Option C

4. Quick Check:

   Astro event syntax = on:event [OK]

Hint: Use 'on:click' not 'onClick' for events in Astro [OK]

Common Mistakes:

• Using React-style 'onClick' instead of 'on:click'
• Thinking variables must be exported to update
• Believing Astro disallows buttons

5. You want to create a simple Astro page that shows a list of names passed as a prop and highlights names longer than 5 letters. Which approach fits best?

hard

A. Use React inside Astro and manage state with useState hook for the list

B. Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names

C. Write plain HTML with no scripting and manually highlight names

D. Create a server-side API to filter names before sending to Astro

Solution

1. Step 1: Understand Astro's component capabilities

   Astro supports scripting inside components to receive props and render dynamic lists with conditions.

2. Step 2: Evaluate options for best fit

   Using an Astro component with a <script> block to receive the list, then a map in the markup with a condition to add a CSS class for long names uses Astro's built-in features to map and conditionally style names, which is simple and efficient. Using React inside Astro adds unnecessary complexity, writing plain HTML with no scripting is static, and creating a server-side API is overkill for this task.

3. Final Answer:

   Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names -> Option B

4. Quick Check:

   Astro dynamic list with condition = Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names [OK]

Hint: Use Astro script + map + condition for dynamic lists [OK]

Common Mistakes:

• Ignoring Astro's scripting and using static HTML
• Adding React unnecessarily inside Astro
• Overcomplicating with server APIs for simple UI