What is @astrojs/react

AstroConceptBeginner · 3 min read

@astrojs/react: React Integration for Astro Projects

@astrojs/react is an official integration package that allows you to use React components inside Astro projects. It helps Astro render React components seamlessly alongside other frameworks, combining their strengths in one site.

⚙️

How It Works

@astrojs/react acts like a bridge between Astro and React. Imagine Astro as a chef who can cook many dishes, and React as a specialist in making a particular dish. This integration lets the chef use React's special recipe right inside the kitchen without changing the whole menu.

When you add @astrojs/react to your Astro project, it lets Astro understand and render React components. Astro compiles your site mostly as static HTML but can include React components that behave dynamically on the client side. This means you get fast loading pages with interactive parts powered by React.

Under the hood, the integration handles loading React's JavaScript and rendering React components only where needed. This keeps your site efficient and smooth, combining Astro's speed with React's interactivity.

💻

Example

This example shows how to use a React component inside an Astro page using @astrojs/react.

astro

---
import React from 'react';

// React component
export function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}
---

<html lang="en">
  <head>
    <title>Astro with React</title>
  </head>
  <body>
    <h1>Welcome to Astro</h1>
    <!-- Use React component inside Astro -->
    <Greeting name="Friend" />
  </body>
</html>

Output

<h1>Welcome to Astro</h1> <h2>Hello, Friend!</h2>

🎯

When to Use

Use @astrojs/react when you want to build a website with Astro but also need React's powerful UI components or libraries. For example, if you have existing React components or want to use React-based UI frameworks, this integration lets you combine them easily.

It's great for projects that need mostly static content for speed but also want interactive parts like forms, buttons, or dynamic lists powered by React. This way, you get the best of both worlds: fast loading and rich interactivity.

✅

Key Points

@astrojs/react enables React components inside Astro projects.
It helps combine Astro's static site speed with React's interactivity.
React components are rendered only where needed for efficiency.
Ideal for adding React UI or using existing React libraries in Astro.

✅

Key Takeaways

@astrojs/react lets you use React components inside Astro sites easily.

It combines Astro's fast static rendering with React's dynamic UI features.

Use it when you want interactive React parts in an otherwise static Astro site.

The integration loads React only where needed to keep sites efficient.