Getting Started
16 May 20256 minutes to read
This article provides a step-by-step introduction to get started with the Syncfusion® React Message component.
Prerequisites
System requirements for Syncfusion® React UI components
Dependencies
The following list of dependencies are required to use the Message
component in the application.
|-- @syncfusion/ej2-react-notifications
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-notifications
|-- @syncfusion/ej2-react-base
Create the React application
To easily set up a React application, use create-vite-app
, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app
. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.
Note: To create a React application using
create-react-app
, refer to this documentation for more details.
To create a new React application, run the following command.
npm create vite@latest my-app
To set-up a React application in TypeScript environment, run the following command.
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
To set-up a React application in JavaScript environment, run the following command.
npm create vite@latest my-app -- --template react
cd my-app
npm run dev
Add Syncfusion® React packages
Once you have created the React application, install the required Syncfusion® React component package in the application. All Syncfusion® React (Essential® JS 2) packages are published on the npmjs.com public registry.
To install the Message component package, use the following command.
npm install @syncfusion/ej2-react-notifications --save
or
yarn add @syncfusion/ej2-react-notifications
Also, check out the installation section to know the different ways of installing the packages.
Import the Syncfusion® CSS styles
After installing the Syncfusion® component packages in the application, import the required themes based on the components used.
The Syncfusion® React component comes with built-in themes, which are available in installed packages. It is quite simple to adapt the Syncfusion® React components based on the application style by referring to any of the built-in themes. Import the Material
theme for the Message component.
Import the CSS styles for the Message component and its dependencies in the src/App.css
file.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-notifications/styles/material.css';
Check out the Themes topic to know more about built-in themes and different ways to refer to themes in React applications.
Add Message component to the application
Start adding the required components to the application. Add the Message component in the src/App.js
or src/App.tsx
file using the following code.
-
Before adding the Message component to the markup, import the Message component in the
src/App.js
orsrc/App.tsx
file.import { MessageComponent } from '@syncfusion/ej2-react-notifications';
-
Then, add the
Message
component in the application using the following code sample.
import './App.css';
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
Run the application
Now run the npm run dev
command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
npm run dev
or
yarn dev
The output will appear as follows.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Message</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-notifications/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
<style>
/* Sample level styles */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-message {
margin: 100px;
}
</style>
</body>
</html>