Use React component in Astro

By

Use a React component in Astro, render it as static HTML by default, and add a client directive only when it needs browser-side interactivity.

~~~

Install Astro’s React integration:

npx astro add react

Then create components/Test.jsx

export default function Greeting({ name }) {
  return <p>Hello {name}</p>
}

Import and render it in a .astro component:

---
import Greeting from '../components/Greeting.jsx'
---

<Greeting name="Flavio" />

Astro renders this component to HTML during the build or server render. No React JavaScript is sent to the browser.

If the component uses state, event handlers, effects, or another browser API, hydrate it with a client directive:

<Greeting client:load name="Flavio" />

client:load hydrates it as soon as the page loads. Astro also provides directives such as client:idle and client:visible so less important components can wait.

Tagged: Astro, React · All topics
~~~

Related posts about astro: