Hey there! If you love React and want to try out a faster, lighter way to build websites, then Astro has you covered. Astro makes it easy to use React components within its static-first framework.
In this post, I’ll show you how to integrate React into an Astro project and build a cool interactive app to get you started.
Why Use React with Astro?
Astro’s biggest strength is its static-first approach, but sometimes you need that React magic for dynamic interactivity. Here’s why combining React with Astro can be a winning combo:
- Best of both worlds: Retain use of Astro’s lightweight performance while keeping React’s powerful component-based system for interactive features.
- Selective hydration: Astro lets you load React components only when they’re needed, saving bandwidth and speeding up your site.
- Easy integration: Adding React to Astro is simple and intuitive—you don’t have to rewrite your React components.
Let’s Build a React-Powered Counter in Astro
You're here for a demo. Let’s get started! We’re going to build a simple counter app using React within an Astro project.
Here’s how:
Step 1: Create a New Astro Project
- Start by setting up a fresh Astro project. Follow the prompts and you want to start in this dir
.and you want a fresh starter app:
mkdir astro-land && cd astro-land
npm create astro@latest
- Add React support to your project. Follow the prompts. Astro makes it super easy:
npx astro add react
Step 2: Build the Counter Component
- Create a React component for the counter. In
src/components/Counter.jsx, add this:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div style={{ textAlign: 'center' }}>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
export default Counter;
Step 3: Use the Counter in an Astro Page
- Open or create
src/pages/index.astroand import theCountercomponent:
---
import Counter from '../components/Counter.jsx';
---
<html>
<head>
<title>React in Astro</title>
</head>
<body>
<h1 style={{ textAlign: 'center' }}>Welcome to Astro + React</h1>
<Counter client:load />
</body>
</html>
Here’s the magic: the client:load directive tells Astro to hydrate this component on the client side, making it interactive.
Step 4: Run and See the Magic
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:4321. Click those buttons, and watch your counter work like a charm!
Selective Hydration: Why It’s Awesome
One of Astro’s coolest features is selective hydration. Unlike traditional frameworks that load all JavaScript upfront, Astro only hydrates the components that need interactivity. This means your site stays fast and snappy, even as you add more dynamic elements.
In our example, only the Counter component gets hydrated, while the rest of the page is just static HTML.
Final Thoughts
Using React with Astro is a game-changer for building high-performance websites with just the right amount of interactivity. Whether you’re building a blog, a portfolio, or a complex app, this combo gives you the tools to create something awesome.
So go ahead, give Astro + React a spin, and let me know what you think. Happy coding!
Comment below if this helped or if you'd like to see more tutorials on React + Astro. For example, integrating more complicated components with props, adding other frameworks like Tailwind and more!
Top comments (0)