What is Astro - Hands-On Activity

What is Astro

📖 Scenario: You want to learn about Astro, a modern tool for building websites.

🎯 Goal: Understand what Astro is and create a simple Astro component that shows a welcome message.

📋 What You'll Learn

Create a basic Astro component file

Add a heading with the text 'Welcome to Astro!'

Use semantic HTML tags

Keep the component simple and clear

💡 Why This Matters

🌍 Real World

Astro is used to build fast, optimized websites that load quickly and are easy to maintain.

💼 Career

Knowing Astro helps web developers create modern websites with better performance and simpler code.

1

Create a basic Astro component

Create a new Astro component file and add a <h1> heading with the text Welcome to Astro! inside it.

Astro

Welcome to Astro!

Hint

Use a heading tag like <h1> to show the welcome message.

2

Add a paragraph explaining Astro

Below the <h1>, add a <p> paragraph that says Astro is a modern framework for building fast websites.

Astro

Welcome to Astro!
Astro is a modern framework for building fast websites.

Hint

Use a paragraph tag <p> to add the description.

3

Add a list of Astro features

Add an unordered list <ul> with three list items <li> below the paragraph. The items should be: Fast, Simple, and Flexible.

Astro

Welcome to Astro!
Astro is a modern framework for building fast websites.

  Fast
  Simple
  Flexible

Hint

Use <ul> for the list and <li> for each feature.

4

Export the Astro component

Add the --- frontmatter tags at the top and export the component as default by adding export default true; inside the frontmatter.

Astro

---
export default true;
---
Welcome to Astro!
Astro is a modern framework for building fast websites.

  Fast
  Simple
  Flexible

Hint

Use frontmatter tags --- and export the component with export default true;.

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