How to Use Astro with a Sprinkling of React

Here’s how to use Astro to incrementally adopt a “reduced JavaScript” approach to building websites. No more refactoring every component!

The thought of migrating away from a React-based framework might seem a little scary at first, but if you’re intrigued about how that might work, read on.

I recently made the decision to migrate my site, paulie.dev, away from a React-based framework to Astro, a web framework known for its “islands architecture.” Naturally, in my old site, everything was React, so my first thought was: this is gonna be a lot of work. But it wasn’t!

During my development, I was able to lift-and-shift a lot of the “React-specific” components and drop them straight into my new Astro site. In this post, I’ll explain an approach that might work for you, and if you’re interested in incrementally adopting a no/low JavaScript approach to building websites, I think you’ll like Astro!

Here’s a sample site and GitHub repository that I’ll be referencing throughout this post that demonstrates how Astro can be used alongside a sprinkling of React.