Hey there! If you love <a href="https://react.dev/" rel="noopener noreferrer">React</a> and want to try out a faster, lighter way to build websites, then Astro has you covered. <a href="https://astro.build/" rel="noopener noreferrer">Astro</a> 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. <h2> Why Use React with Astro? </h2> 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: <ul> <li> Best of both worlds: Retain use of Astro’s lightweight performance while keeping React’s powerful component-based system for interactive features.</li> <li> Selective hydration: Astro lets you load React components only when they’re needed, saving bandwidth and speeding up your site.</li> <li> Easy integration: Adding React to Astro is simple and intuitive—you don’t have to rewrite your React components.</li> </ul> <h2> Let’s Build a React-Powered Counter in Astro </h2> 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: <h3> Step 1: Create a New Astro Project </h3> <ol> <li>Start by setting up a fresh Astro project. Follow the prompts and you want to start in this dir <code>.</code> and you want a fresh starter app: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> mkdir astro-land && cd astro-land npm create astro@latest </code></pre> </div> <ol> <li>Add React support to your project. Follow the prompts. Astro makes it super easy: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> npx astro add react </code></pre> </div> <h3> Step 2: Build the Counter Component </h3> <ol> <li>Create a React component for the counter. In <code>src/components/Counter.jsx</code>, add this: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code> 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; </code></pre> </div> <h3> Step 3: Use the Counter in an Astro Page </h3> <ol> <li>Open or create <code>src/pages/index.astro</code> and import the <code>Counter</code> component: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code> --- 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> </code></pre> </div> Here’s the magic: the <code>client:load</code> directive tells Astro to hydrate this component on the client side, making it interactive. <h3> Step 4: Run and See the Magic </h3> <ol> <li>Start the development server: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> npm run dev </code></pre> </div> <ol> <li>Open your browser and navigate to <code>http://localhost:4321</code>. Click those buttons, and watch your counter work like a charm!</li> </ol> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdd0gns4tq5of4qtflg75.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdd0gns4tq5of4qtflg75.png" alt="Image description" width="800" height="447"></a> <h2> Selective Hydration: Why It’s Awesome </h2> 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 <code>Counter</code> component gets hydrated, while the rest of the page is just static HTML. <h2> Final Thoughts </h2> 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 <a href="https://tailwindcss.com/" rel="noopener noreferrer">Tailwind</a> and more!

Lire l'article