Getting Started with an Astro App using React Components

This guide shows you how to set up an Astro application and integrating Syncfusion^® React components.

What is Astro?

Astro is a modern web framework for building fast, content-driven sites. It focuses on performance and is ideal for static websites, blogs, and documentation. Developers use Astro to create lightweight, highly optimized projects with ease.

Prerequisites

• System requirements for Syncfusion^® React UI components

• System requirements for Astro Application

Create an Astro project

To create a new Astro project, use the following command:

npm create astro@latest

After running the command, follow the prompts to configure your Astro project:

dir     :  Where should we create your new project?
             astro-project
        
tmpl  :  How would you like to start your new project?
              > A basic, helpful starter project (recommended)
              — Use blog template
              — Use docs (Starlight) template
              — Use minimal (empty) template
deps  : Install dependencies? (recommended)
              ● Yes  ○ No
git      : Initialize a new git repository? (optional)
              ○ Yes  ● No

Add React support to Astro project

React is one of the most popular UI libraries that can be seamlessly integrated with Astro projects. Follow these steps to add React support to your Astro project.

1. Install React and Astro React packages

Install the necessary React packages and the Astro React packages:

npm i react react-dom @astrojs/react

2. Integrate React with Astro

Open your astro.config.mjs file and add the React integration code:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
    integrations: [react()]
});

Install Syncfusion^® React packages

Syncfusion^® React components are available on npmjs.com. To use the React Message component, install the @syncfusion/react-notifications package:

npm install @syncfusion/react-notifications --save

Add the Syncfusion^® React component

To use the Message component in your application, create a new file named message.tsx in the src/components/ directory. Then, add the following sample code to include the Message in your Astro project.

import { Message, Severity } from '@syncfusion/react-notifications';

export default function App() {
    return (
        <div style={{ width: '350px', margin: '150px auto' }}>
            <Message severity={Severity.Success}>Your message has been sent successfully</Message>
        </div>
    );
}

Import Syncfusion^® CSS styles

Import themes for our React components using CSS or SASS from npm packages. For details on built-in themes and usage, refer to the themes topic.

In this guide, we apply the Material theme with CSS styles in the src/components/message.tsx file:

import '@syncfusion/react-base/styles/material.css';
import '@syncfusion/react-notifications/styles/material.css';

Ensure CSS styles are imported in the correct dependency order.

Display the message component in the Astro page

To show the Message component on your page, import and place it in your src/pages/index.astro file:

---
import Message from '../message';
---

<Message client:only="react" />

Use client:only="react" for Syncfusion^® React components because these components depend entirely on React’s runtime and cannot be server-rendered by Astro.

Run the project

To run the project, use the following command:

npm run dev

The output will appear as follows: