Markdown and MDX pages in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Astro MDX component?

Given this Astro MDX page, what will be the visible output in the browser?

Astro

---
const name = 'Astro Learner';
---
# Welcome, {name}!

This is a simple MDX page.

A <h1>Welcome, Astro Learner!</h1><p>This is a simple Astro page.</p>

B <h1>Welcome!</h1><p>This is a simple MDX page.</p>

C <h1>Welcome, {name}!</h1><p>This is a simple MDX page.</p>

D <h1>Welcome, Astro Learner!</h1><p>This is a simple MDX page.</p>

💡 Hint

Remember Astro MDX supports JavaScript expressions inside curly braces.

The variable name is injected inside the heading using {name}, so it renders as 'Astro Learner'. The paragraph text matches exactly.

📝 Syntax

intermediate

Which MDX syntax correctly imports and uses a React component in Astro?

Choose the correct way to import and use a React component Button inside an Astro MDX page.

A

>nottuB/<em kcilC>nottuB<
---
;'xsj.nottuB/stnenopmoc/..' morf nottuB tropmi
---

B

---
import { Button } from '../components/Button.jsx';
---
<Button>Click me</Button>

C

---
import Button from '../components/Button.jsx';
---
<Button>Click me</Button>

D

---
import Button from '../components/Button.jsx';
---
<button>Click me</button>

💡 Hint

Astro MDX supports default imports with semicolons and JSX usage.

Option C correctly imports the default export with a semicolon and uses the <Button> JSX tag. Option C tries named import which may fail if Button is default export. Option C is now correct with semicolon added. Option C uses lowercase button which is HTML, not the React component.

🔧 Debug

advanced

Why does this Astro MDX page fail to render?

Identify the cause of the rendering error in this Astro MDX page:

Astro

---
const title = 'Hello World'
---
# {title}

Some content here.

A Missing semicolon after variable declaration causes syntax error.

B Curly braces cannot be used inside Markdown headings in MDX.

C The variable <code>title</code> is not defined in the frontmatter.

D MDX requires explicit export of variables to use them in content.

💡 Hint

Check JavaScript syntax in the frontmatter section.

In Astro MDX frontmatter, JavaScript code must be valid. Missing semicolon after const title = 'Hello World' causes a syntax error. Curly braces inside headings are valid in MDX. The variable is defined. No export needed for frontmatter variables.

❓ state_output

advanced

What is the output of this Astro MDX page with a React counter component?

Consider this Astro MDX page that imports a React counter component. What will the initial rendered HTML show?

Astro

---
import Counter from '../components/Counter.jsx';
---
# Counter Demo

<Counter />

A <h1>Counter Demo</h1><button>Count: 0</button>

B <h1>Counter Demo</h1><button>Count: 1</button>

C <h1>Counter Demo</h1><button>Count: </button>

D <h1>Counter Demo</h1><button>Click me</button>

💡 Hint

React components start with initial state on first render.

The React Counter component initializes count state at 0, so the button text shows 'Count: 0' initially. Other options show wrong counts or text.

🧠 Conceptual

expert

How does Astro handle hydration for React components in MDX pages?

Which statement best describes how Astro hydrates React components used inside MDX pages?

A Astro always hydrates all React components on the client by default without any special directives.

B Astro renders React components to static HTML and hydrates them on the client only when specified with <code>client:load</code> or similar directives.

C Astro does not support React components inside MDX pages at all.

D Astro hydrates React components on the server and sends fully interactive HTML to the client.

💡 Hint

Think about Astro's partial hydration approach.

Astro renders React components to static HTML during build or server render. It hydrates them on the client only if you add hydration directives like client:load, client:idle, or client:visible. This optimizes performance by avoiding unnecessary JavaScript.

Practice

1. What is the main difference between Markdown and MDX in Astro?

easy

A. Markdown supports JavaScript code, but MDX does not.

B. Markdown files can run server code, MDX files cannot.

C. MDX is only for styling, Markdown is for content.

D. MDX allows embedding components inside Markdown content, while Markdown does not.

Solution

1. Step 1: Understand Markdown basics

   Markdown is a simple way to write formatted text like headings, lists, and links.

2. Step 2: Understand MDX extension

   MDX extends Markdown by allowing you to include interactive components inside the text.

3. Final Answer:

   MDX allows embedding components inside Markdown content, while Markdown does not. -> Option D

4. Quick Check:

   MDX = Markdown + components [OK]

Hint: Remember: MDX = Markdown + components [OK]

Common Mistakes:

• Thinking Markdown supports components
• Confusing MDX with styling only
• Believing Markdown runs server code

2. Which file extension should you use for a page that includes React components inside Markdown in Astro?

easy

A. .mdx

B. .astro

C. .md

D. .jsx

Solution

1. Step 1: Identify file types for Markdown and MDX

   Markdown files use .md extension, MDX files use .mdx extension to support components.

2. Step 2: Match file extension to React components inside Markdown

   To include React components inside Markdown, use .mdx files.

3. Final Answer:

   .mdx -> Option A

4. Quick Check:

   React components in Markdown = .mdx [OK]

Hint: Use .mdx for Markdown with components [OK]

Common Mistakes:

• Using .md for MDX content
• Confusing .astro with Markdown files
• Choosing .jsx which is for pure React files

3. Given this Astro MDX page snippet, what will be rendered?

---
import Button from '../components/Button.jsx';
---
# Welcome
Click me

medium

A. A syntax error because components can't be imported in MDX.

B. Only the heading 'Welcome' without the button.

C. A heading 'Welcome' and a clickable button labeled 'Click me'.

D. The button renders but the heading does not.

Solution

1. Step 1: Understand MDX import and usage

   MDX allows importing components at the top and using them inline in the Markdown content.

2. Step 2: Analyze the snippet output

   The heading '# Welcome' renders as a heading, and the <Button> component renders as a clickable button with text 'Click me'.

3. Final Answer:

   A heading 'Welcome' and a clickable button labeled 'Click me'. -> Option C

4. Quick Check:

   MDX imports + components = rendered output [OK]

Hint: MDX imports components, renders both text and UI [OK]

Common Mistakes:

• Thinking imports cause syntax errors in MDX
• Assuming components won't render inside MDX
• Ignoring Markdown headings when components are present

4. What is wrong with this Astro MDX page snippet?

---
import Alert from '../components/Alert.jsx'
---
# Notice
This is important

medium

A. No error; this code is correct.

B. Incorrect import path syntax.

C. Missing semicolon after import statement.

D. Missing closing quote in import statement.

Solution

1. Step 1: Check import syntax in MDX frontmatter

   In MDX frontmatter, semicolons are optional and import paths use quotes correctly.

2. Step 2: Verify component usage

   The Alert component is imported and used correctly inside the MDX content.

3. Final Answer:

   No error; this code is correct. -> Option A

4. Quick Check:

   MDX import syntax is flexible = correct [OK]

Hint: Semicolons optional in MDX imports [OK]

Common Mistakes:

• Expecting semicolons after imports
• Thinking import paths need special syntax
• Assuming missing semicolon causes error

5. You want to create a blog post in Astro that uses Markdown for text and includes a custom interactive component for comments. Which approach is best?

hard

A. Write the entire post in .md and import the component inside it.

B. Use .mdx for the post so you can embed the comment component directly.

C. Create a .astro page and write Markdown inside it manually.

D. Use .md and add the component via client-side JavaScript after page load.

Solution

1. Step 1: Understand Markdown limitations

   Plain .md files cannot embed components directly; they are static content.

2. Step 2: Consider MDX advantages

   .mdx files allow mixing Markdown with components, perfect for interactive elements like comments.

3. Step 3: Evaluate other options

   .astro pages can include Markdown but require more setup; client-side JS injection is less clean and less integrated.

4. Final Answer:

   Use .mdx for the post so you can embed the comment component directly. -> Option B

5. Quick Check:

   Interactive + Markdown = MDX [OK]

Hint: Embed components directly by using .mdx files [OK]

Common Mistakes:

• Trying to import components in plain .md files
• Ignoring MDX for interactive content
• Overcomplicating with client-side JS injection