React components in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using React components inside an Astro project?

React components let you add interactive UI parts inside Astro, which mainly builds static sites. This way, you get the best of both: fast static pages and dynamic React features.

beginner

How do you import a React component into an Astro file?

Use the syntax: <code>import MyComponent from './MyComponent.jsx';</code> at the top of your Astro file. Then you can use <code>&lt;MyComponent /&gt;</code> inside your Astro template.

intermediate

What is the role of the client:load directive when using React components in Astro?

The client:load directive tells Astro to load and run the React component only on the browser after the page loads. This makes the component interactive without slowing down the initial page load.

intermediate

Can you explain the difference between client:load and client:idle in Astro React components?

client:load loads the React component as soon as the page loads. client:idle waits until the browser is idle before loading the component, improving performance by delaying less important scripts.

beginner

Why is it important to use React components only where interactivity is needed in Astro?

Because React components add JavaScript to the page, using them only when needed keeps the site fast and lightweight. Astro’s strength is static content, so limiting React helps maintain speed and good user experience.

How do you make a React component interactive in Astro?

A Add <code>client:load</code> to the component tag

B Import it with <code>import React from 'react'</code>

C Wrap it in a <code>&lt;script&gt;</code> tag

D Use <code>server:only</code> directive

Adding client:load tells Astro to load the React component on the client side, making it interactive.

Where do you write the import statement for a React component in an Astro file?

A At the top of the Astro file

B Inside the component JSX code

C Inside a <code>&lt;script&gt;</code> tag in HTML

D You don't need to import React components

You import React components at the top of the Astro file using JavaScript import syntax.

What happens if you don't add any client directive to a React component in Astro?

A The component will be interactive by default

B Astro will throw an error

C The component will load twice

D The component will render static HTML only, no interactivity

Without a client directive, Astro renders the React component as static HTML without JavaScript interactivity.

Which client directive delays loading a React component until the browser is idle?

A client:load

B client:visible

C client:idle

D client:media

client:idle waits for the browser to be idle before loading the component, improving performance.

Why might you choose to use React components inside Astro instead of pure Astro components?

A Because Astro does not support HTML

B To add interactive features like buttons or forms

C To make the site load slower

D To avoid using JavaScript

React components are used inside Astro to add interactivity that static Astro components alone cannot provide.

Describe the steps to add a React component to an Astro page and make it interactive.

Think about import, usage, and client directives.

Explain why Astro uses client directives like client:load or client:idle when working with React components.

Consider how loading timing affects user experience.