How To Use React Components In Astro

One of the best aspects of the astro framework is the fact you can BYOF (bring your own framework). Allowing developers to bring their favorite framework, if its React, Vue, Solid etc you can build in astro with what you are most comfortable with.

Firstly You need to add React using the astro cli

npx astro add react

Then create your component in the components folder src/components/Component.jsx/tsx

inside your astro component inside the --- tags import the component.

import Component from '../components/Component'

Now inside your pages jsx you can include your component like you would in any other react app like the following

---
import Component from '../components/Component'
---

<div>
  <Component />
</div>

Adding Reactivity

If your component requires reactivity via client side you will need to add the client:load to allow it to happen on the load of the component.

---
import Component from '../components/Component'
---

<div>
  <Component client:load />
</div>