#How to use React components in .astro file?

3 messages · Page 1 of 1 (latest)

wanton fern
#

Question above.

obsidian star
opaque musk
#

To use React components in an .astro file, follow these steps:

  • Install the React integration:
    Add the React integration to your Astro project.

  • Import the React component:
    In your .astro file, import the React component from its file location.

  • Use the React component:
    Add the React component in the HTML section of your .astro file, just like you would with any HTML element.

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Use React components directly in Astro!</h1>
    <MyReactComponent />
  </body>
</html>

By default, the React component will render as static HTML on the server. To make it interactive, add a client:* directive to the component to specify when its JavaScript should load on the client side, like client:load, client:visible, or client:idle. For example:

<MyReactComponent client:load />

This makes the React component interactive when the page loads.

For more read this doc: https://docs.astro.build/en/guides/framework-components/#using-framework-components

Docs
Framework Components

Learn how to use React, Svelte, etc.