React components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a React component into an Astro file.

Astro

import MyComponent from './components/MyComponent.[1]';

Drag options to blanks, or click blank then click option'

Ajsx

Btsx

Cjs

Dastro

Attempts:

3 left

💡 Hint

Common Mistakes

Using .astro extension instead of .jsx

Using .tsx when the component is not TypeScript

Using .js which might not support JSX syntax

React components in Astro are usually imported from files with the .jsx extension.

2fill in blank

medium

Complete the code to render a React component inside an Astro file.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:load

Bclient:idle

Crender

Dclient:only

Attempts:

3 left

💡 Hint

Common Mistakes

Using render attribute which is invalid

Using client:only which loads only on client but delays hydration

Using client:idle which delays loading

Use client:load directive to render React components in Astro when you want them to load immediately on the client.

3fill in blank

hard

Fix the error in the React component usage by completing the client directive.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:visible

Bclient:load

Cclient:media

Dclient:only

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load which hydrates immediately but is not React-specific

Using client:visible which hydrates on visibility

Using client:media which hydrates based on media queries

The client:only directive ensures the React component is hydrated only on the client side.

4fill in blank

hard

Fill both blanks to correctly import and use a React component with client-only hydration.

Astro

import [1] from './components/Button.jsx';

<[2] client:only="react" />

Drag options to blanks, or click blank then click option'

AButton

BButtonComponent

DBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching import and usage names

Forgetting the client:only directive

Using incorrect component names

The imported component name and the JSX tag must match exactly for React components in Astro.

5fill in blank

hard

Fill all three blanks to create a React component in Astro that passes props and uses client-only hydration.

Astro

import [1] from './components/Card.jsx';

<[2] title=[3] client:only="react" />

Drag options to blanks, or click blank then click option'

ACard

B"Welcome"

D"Hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatched component names

Passing props without quotes

Omitting client:only directive

The component name must match in import and usage, and props should be passed as strings with quotes.