How to add react integration astro

AstroHow-ToBeginner · 3 min read

How to Add React Integration in Astro Projects

To add React integration in Astro, install @astrojs/react and add it to your astro.config.mjs under integrations. Then, import React components in your Astro files and use them with the <ReactComponent /> syntax.

📐

Syntax

To integrate React in Astro, you first install the React integration package, then add it to your Astro config file. After that, you import React components in your Astro pages or components and use them like normal HTML tags.

npm install @astrojs/react react react-dom: installs React and Astro React integration.
astro.config.mjs: add import react from '@astrojs/react' and include react() in integrations.
In your Astro file, import React components with import MyComponent from './MyComponent.jsx'.
Use the React component in Astro with <MyComponent />.

bash and javascript

npm install @astrojs/react react react-dom

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

// In your Astro file
---
import MyComponent from './MyComponent.jsx';
---
<MyComponent />

💻

Example

This example shows a simple Astro project using a React component. The React component displays a button that counts clicks. The Astro page imports and renders this React component seamlessly.

jsx and astro

// src/components/Counter.jsx
import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

---
// src/pages/index.astro
---
import Counter from '../components/Counter.jsx';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro React Integration</title>
  </head>
  <body>
    <h1>Welcome to Astro with React</h1>
    <Counter />
  </body>
</html>

Output

A webpage with a heading 'Welcome to Astro with React' and a button labeled 'Clicked 0 times'. Clicking the button increments the count displayed.

⚠️

Common Pitfalls

Forgetting to install @astrojs/react or react and react-dom causes errors.
Not adding the React integration to astro.config.mjs means React components won't render.
Using React components without the proper import will cause Astro to fail.
Trying to use React state or hooks inside Astro files directly won't work; React components must be separate.

javascript

// Wrong: Missing integration in astro.config.mjs
// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [], // React integration missing
});

// Right: Add React integration
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

📊

Quick Reference

Follow these steps to add React to Astro:

Install packages: npm install @astrojs/react react react-dom
Add React integration in astro.config.mjs with import react from '@astrojs/react' and integrations: [react()]
Import React components in Astro files
Use React components as JSX tags in Astro

✅

Key Takeaways

Install @astrojs/react and React packages before using React in Astro.

Add the React integration to astro.config.mjs under integrations.

Import React components in Astro files and use them as JSX tags.

React components must be separate files; Astro files cannot use React hooks directly.

Check for missing imports or integration if React components do not render.