0Pricing
React Academy · Lesson

Astro and React Islands Setup

Configure Astro with the React integration and use client:load, client:idle, and client:visible directives.

Creating an Astro Project

Bootstrapping an Astro project uses npx create astro@latest, which runs an interactive wizard to choose a template, TypeScript settings, and package manager. Astro supports multiple starters including a blank template, a blog template, and documentation templates.

Adding the React Integration

Astro integrations add framework support to a project. Running npx astro add react automatically installs @astrojs/react, react, and react-dom, and updates astro.config.mjs to include the React integration. The entire setup takes one command.

All lessons in this course

  1. The Full Hydration Problem
  2. Islands Architecture: Selective Hydration
  3. Astro and React Islands Setup
  4. Measuring Performance: Lighthouse and Core Web Vitals
← Back to React Academy