Component structure (frontmatter + template) in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the frontmatter in an Astro component?

The frontmatter is a special section at the top of an Astro component where you write JavaScript or TypeScript code. It is used to define variables, import other components, and prepare data before rendering the template.

beginner

How do you separate the frontmatter from the template in an Astro component?

You separate the frontmatter and the template by enclosing the frontmatter code inside triple dashes (---) at the top of the file. Everything after the closing triple dashes is the template part.

beginner

What kind of code goes inside the template section of an Astro component?

The template section contains HTML and special Astro syntax to define what the component will display. It can include HTML tags, expressions to show variables, and other components.

intermediate

Can you use JavaScript expressions inside the template section of an Astro component?

Yes, you can use JavaScript expressions inside curly braces {} in the template to show dynamic content based on variables defined in the frontmatter.

intermediate

Why is it helpful to keep logic in the frontmatter and markup in the template?

Keeping logic in the frontmatter and markup in the template helps keep the component organized and easy to read. It separates data preparation from how the component looks, making it simpler to maintain.

What symbol marks the start and end of the frontmatter in an Astro component?

A ---

B ```

C <script>

D //

The frontmatter in Astro components is enclosed between triple dashes (---) at the top of the file.

Where do you write HTML markup in an Astro component?

A After the closing triple dashes of the frontmatter

B Inside the frontmatter

C Inside a <template> tag

D Inside a <script> tag

HTML markup goes after the frontmatter section, which ends with the closing triple dashes.

How do you display a variable from the frontmatter inside the template?

A Using {{ variable }}

B Using $variable

C Using <%= variable %>

D Using { variable }

Astro uses curly braces { } to embed JavaScript expressions inside the template.

Which of these is NOT a good reason to separate frontmatter and template?

A Keeps code organized

B Makes components easier to read

C Allows mixing JavaScript and HTML freely anywhere

D Separates logic from markup

Mixing JavaScript and HTML freely anywhere can make code messy; Astro encourages clear separation.

Can you import other components inside the frontmatter?

A Only if you use a special tag

B Yes, you import them in the frontmatter

C No, imports go in the template

D Imports are not allowed in Astro components

You import other components or modules inside the frontmatter using JavaScript import statements.

Explain the structure of an Astro component focusing on the frontmatter and template sections.

Think about how you prepare data and then show it.

Describe how you would display a dynamic message stored in a variable inside an Astro component.

Remember how JavaScript expressions are embedded in the template.

Practice

1. What is the purpose of the frontmatter section in an Astro component?

easy

A. To style the component with CSS

B. To write JavaScript code and define variables used in the template

C. To write HTML markup for the component

D. To import other components only

Solution

1. Step 1: Understand frontmatter role

   The frontmatter section is where you write JavaScript code, such as variables or functions, that the template can use.

2. Step 2: Differentiate from template

   The template part is for HTML markup, not code. Styling is done separately, not in frontmatter.

3. Final Answer:

   To write JavaScript code and define variables used in the template -> Option B

4. Quick Check:

   Frontmatter = JavaScript code [OK]

Hint: Frontmatter holds code; template holds HTML display [OK]

Common Mistakes:

• Confusing frontmatter with template HTML
• Thinking frontmatter is for CSS styling
• Believing frontmatter is only for imports

2. Which of the following is the correct way to start the frontmatter section in an Astro component?

easy

A. //

B. { }

C. /* */

D. ---

Solution

1. Step 1: Identify frontmatter syntax

   Astro uses triple dashes --- at the top and bottom to mark the frontmatter section.

2. Step 2: Compare options

   Curly braces, comments, or single slashes are not used to mark frontmatter.

3. Final Answer:

   --- -> Option D

4. Quick Check:

   Frontmatter starts with --- [OK]

Hint: Frontmatter always starts and ends with --- [OK]

Common Mistakes:

• Using curly braces to start frontmatter
• Confusing comments with frontmatter markers
• Omitting the closing ---

3. Given this Astro component code, what will be displayed when rendered?

---
const greeting = "Hello, Astro!";
---
{greeting}

medium

A. {greeting}

B.

C. Hello, Astro!

D. Error: greeting is undefined

Solution

1. Step 1: Understand variable usage

   The variable greeting is defined in frontmatter with value "Hello, Astro!".

2. Step 2: Template interpolation

   The template uses curly braces {greeting} to insert the variable's value into the HTML.

3. Final Answer:

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

4. Quick Check:

   Curly braces insert variable value [OK]

Hint: Curly braces show frontmatter variables in template [OK]

Common Mistakes:

• Thinking curly braces show as text literally
• Assuming variable is undefined without frontmatter
• Forgetting to close frontmatter with ---

4. What is wrong with this Astro component code?

---
const name = "Astro";

Hello, {name}!
---

medium

A. The template HTML is inside the frontmatter section

B. The variable name is not defined

C. Curly braces cannot be used in Astro templates

D. Missing closing tag for <h1>

Solution

1. Step 1: Identify frontmatter boundaries

   Frontmatter is only for JavaScript code and must be enclosed between --- lines.

2. Step 2: Check template placement

   The HTML template must be outside the frontmatter. Here, the <h1> is inside frontmatter, causing an error.

3. Final Answer:

   The template HTML is inside the frontmatter section -> Option A

4. Quick Check:

   Template must be outside frontmatter [OK]

Hint: Keep HTML outside --- frontmatter --- [OK]

Common Mistakes:

• Placing HTML inside frontmatter
• Forgetting to close frontmatter with ---
• Misusing curly braces syntax

5. How can you display a list of items defined in frontmatter inside the template in Astro? Choose the correct code snippet to render a list of fruits stored in fruits array.

hard

A. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => {fruit})}

B. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{for fruit in fruits}
{fruit}
{/for}

C. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.forEach(fruit => {fruit})}

D. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => "" + fruit + "")}

Solution

1. Step 1: Understand how to loop in Astro template

   Astro templates use JavaScript expressions inside curly braces. map() returns an array of JSX elements to render.

2. Step 2: Check each option's correctness

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => 
   {fruit}
   )}
   

   uses map() correctly to return <li> elements.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {for fruit in fruits}
       
   {fruit}
     {/for}
   

   uses invalid syntax.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.forEach(fruit => 
   {fruit}
   )}
   

   uses forEach() which returns undefined.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => "
   " + fruit + "
   ")}
   

   returns strings, not JSX elements.

3. Final Answer:

   Option A correctly renders the list using map() -> Option A

4. Quick Check:

   Use map() to render lists in Astro templates [OK]

Hint: Use map() inside curly braces to render lists [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Trying template loops with invalid syntax
• Returning strings instead of JSX elements