0
0
Astroframework~20 mins

React components in Astro - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Astro React Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the output of this Astro + React component integration?

Consider this Astro file importing a React component. What will be rendered on the page?

Astro
/* Astro file: Example.astro */
---
import Counter from './Counter.jsx';
---
<html lang="en">
  <body>
    <Counter client:load start={5} />
  </body>
</html>

/* React component: Counter.jsx */
import React, { useState } from 'react';
export default function Counter({ start }) {
  const [count, setCount] = useState(start);
  return (
    <button onClick={() => setCount(count + 1)} aria-label="Increment count">
      Count: {count}
    </button>
  );
}
AA static text 'Count: 5' with no button or interaction.
BA button labeled 'Count: 5' that increments the count on click.
CA button labeled 'Count: 0' that increments the count on click.
DAn error because React components cannot receive props in Astro.
Attempts:
2 left
💡 Hint

Think about how props are passed from Astro to React components and how React state initializes.

📝 Syntax
intermediate
1:30remaining
Which option correctly imports and uses a React component in Astro?

Choose the correct Astro syntax to import and render a React component named MyButton from ./MyButton.jsx.

A
---
import MyButton from './MyButton.jsx';
---
&lt;component src={MyButton} /&gt;
B
---
import { MyButton } from './MyButton.jsx';
---
&lt;MyButton /&gt;
C
---
import MyButton from './MyButton.jsx';
---
&lt;ReactComponent src={MyButton} /&gt;
D
---
import MyButton from './MyButton.jsx';
---
&lt;MyButton /&gt;
Attempts:
2 left
💡 Hint

Astro imports React components as default exports and uses JSX syntax directly.

❓ lifecycle
advanced
2:00remaining
How does React component lifecycle behave when used in Astro with client:load?

Given a React component used in Astro with client:load directive, when does the React component mount?

Astro
<!-- Astro file snippet -->
<MyComponent client:load />
AThe React component mounts immediately on page load in the browser after Astro renders static HTML.
BThe React component mounts during server-side rendering before sending HTML to the browser.
CThe React component never mounts because client:load disables hydration.
DThe React component mounts only when the user scrolls to it.
Attempts:
2 left
💡 Hint

Recall what client:load means in Astro for React components.

🔧 Debug
advanced
2:30remaining
Why does this React component fail to hydrate in Astro?

Astro renders this React component, but React hydration fails with a mismatch error. What is the likely cause?

Astro
/* React component Counter.jsx */
import React, { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(Math.floor(Math.random() * 10));
  return <div>Count: {count}</div>;
}

/* Astro file */
---
import Counter from './Counter.jsx';
---
<Counter client:load />
AReact components cannot use useState in Astro, causing hydration errors.
BMissing a key prop on the Counter component causes hydration failure.
CThe initial state uses random value causing server and client HTML to differ, breaking hydration.
Dclient:load directive is invalid and prevents hydration.
Attempts:
2 left
💡 Hint

Think about what happens when server and client render different initial HTML.

🧠 Conceptual
expert
3:00remaining
What is the best explanation of Astro's partial hydration with React components?

Astro supports partial hydration of React components. Which statement best describes this behavior?

AAstro renders static HTML for the whole page and hydrates only specified React components on the client, improving performance.
BAstro fully hydrates all React components on the client regardless of directives, ensuring full interactivity.
CAstro converts React components to static HTML at build time and never hydrates them on the client.
DAstro requires React components to be wrapped in a special provider to enable hydration.
Attempts:
2 left
💡 Hint

Consider how Astro optimizes loading by hydrating only parts that need interactivity.