Getting Started with a Vite App using React Components

This guide outlines how to set up a Vite project within a TypeScript environment and integrate Syncfusion^® React components.

Vite is a build tool and development server for modern web projects. It supports cutting-edge web technologies like ES modules, TypeScript, JSX, and CSS modules. Vite's development server leverages native ES modules in modern browsers, ensuring rapid startup and quick feedback during development.

Prerequisites

System requirements for Syncfusion^® React UI components

Create a Vite project

To create a new Vite project, use either NPM or Yarn.

npm create vite@latest

Executing one of the above commands will guide you through additional configuration steps:

1. Specify the project name. For this guide, we'll use my-project.

? Project name: » my-project

2. Select React as the framework, which will set up a React project.

? Select a framework: » - Use arrow-keys. Return to submit.
     Vanilla
     Vue
>   React
     Preact
     Lit
     Svelte
     Others

3. Choose TypeScript as the framework variant to build this Vite project with Typescript and React.

? Select a variant: » - Use arrow-keys. Return to submit.
     JavaScript
>   TypeScript
     JavaScript + SWC
     TypeScript + SWC

4. Choose not to use the experimental bundler and skip automatic npm install & start.

Use rolldown-vite (Experimental)?:
○ Yes
● No
Install with npm and start now?:
○ Yes / ● No

5. After setting up my-project, install its dependencies:

cd my-project 
npm install

Now that my-project is ready to run with default settings, let's add Syncfusion^® components to the project.

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

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/App.css file:

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

Ensure CSS styles are imported in the correct dependency order.

Add Syncfusion^® React component

Follow these steps to add the React Message component to the Vite project:

1. Import the Message component in src/App.tsx:

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

2. Then, add the Message component in the application using the following code sample.

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

export default function App() {
    return (
    <div className="component-section">
        <Message severity={Severity.Success}>Your message has been sent successfully</Message>
    </div>
    );
}

Run the project

Execute the following command to run the project:

npm run dev

The output will appear as follows:

See also

• Getting Started with Syncfusion^® React UI Component in NextJs