Integration of React Components with .NET Core

This guide demonstrates how to add Syncfusion^® React components into a .NET Core React project.

.NET Core is a modern, open-source, cross-platform framework from Microsoft for building web, cloud, and desktop applications. Users can easily incorporate these Syncfusion^® React components into a .NET Core generated React app to quickly build feature-rich, visually appealing user interfaces.

Prerequisites

• .NET Core SDK 6.0 or later

• System requirements for Syncfusion^® React UI components

Create a .NET Core React project

Create a new .NET Core React project using the CLI, which scaffolds a React SPA template with ASP.NET Core backend.

dotnet new react -n MyReactApp
cd MyReactApp

Install Syncfusion^® React packages

Syncfusion^® React components are available on npmjs.com. To integrate them into your project, install the required npm package.

1. Navigate to the ClientApp directory:

cd ClientApp

2. To use the React Message component, install the @syncfusion/react-notifications package:

npm install @syncfusion/react-notifications --save

Import Syncfusion^® CSS styles

Import the required CSS files for the Message component into the ClientApp/src/custom.css file.

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

Add Syncfusion^® React component

To add the React Message component in your .NET Core project, follow these steps:

1. In the ClientApp/src/components folder, create a new file named MessageComponent.js and add the following code:

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

export function MessageComponent() {
  return (
    <div style={{ width: '300px', margin: '0 auto' }}>
        <Message severity={Severity.Success} closeIcon={true}>
            Your message has been sent successfully
        </Message>
    </div>
  );
}

2. Register your new component in the app by editing ClientApp/src/AppRoutes.js and adding an import and route, for example:

import { MessageComponent } from './components/MessageComponent';

// add your routes in AppRoutes
const AppRoutes = [
  ...
  {
    path: '/react',
    element: <MessageComponent />
  }
];

3. Add navigation to your NavMenu in ClientApp/src/components/NavMenu.js:

<NavItem>
    <NavLink tag={Link} className="text-dark" to="/react">React</NavLink>
</NavItem>

Run the .NET Core React application

Back in the root directory, run your application using:

dotnet run

Once the application has started, it will be running at a URL similar to http://localhost:5***/ in your terminal. After the application is running, click the React link in the navigation bar to view the Syncfusion® React components.

The output will appear as follows: