Getting Started with Syncfusion® React UI Components

20 Aug 202517 minutes to read

This article provides a step-by-step guide for integrating Syncfusion® React UI components into a new React application.

Prerequisites

System requirements for Syncfusion® React UI components

Create the React application

The recommended approach is to use the Create React App tool for initializing your project. This tool sets up a development environment and optimizes the build for production.

To create a new application using JavaScript:

npx create-react-app my-app cd my-app npm start

or

yarn create react-app my-app cd my-app yarn start

To set-up a React application in TypeScript environment, run the following command.

npx create-react-app my-app --template typescript cd my-app npm start

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

npm init react-app my-app cd my-app npm start

Install Syncfusion® React packages

After creating the React application, install the Syncfusion® React component packages as required. All packages are available on the npmjs.com public registry.

This guide uses the Grid component as an example. To install the Grid package, use:

npm install @syncfusion/ej2-react-grids --save

or

yarn add @syncfusion/ej2-react-grids

Additional information on package installation methods is available in the installation section.

Import Syncfusion® CSS styles

Syncfusion® React components include built-in themes. Import the CSS styles for the required components and their dependencies in the src/App.css file. The example below demonstrates importing the Material theme for the Grid component and its dependencies:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";

For more details on built-in themes and usage, see the Themes topic.

Add a Syncfusion® component to the application

Begin adding required Syncfusion® components to your application. The following example demonstrates how to add the Grid component in the src/App.js file.

  1. Import the necessary components in the src/App.js file:

     import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

2.Then, to display the Grid with records, add the Grid component and bind the dataSource to it. Here, we have mapped the simple data as the dataSource.

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; import './App.css'; function App() { const data = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 } ]; return ( <GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' width='100' textAlign="Right"/> <ColumnDirective field='CustomerID' width='100'/> <ColumnDirective field='EmployeeID' width='100' textAlign="Right"/> <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/> <ColumnDirective field='ShipCountry' width='100'/> </ColumnsDirective> </GridComponent> ); } export default App;
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; import './App.css'; function App() { const data = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 } ]; return (<GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' width='100' textAlign="Right"/> <ColumnDirective field='CustomerID' width='100'/> <ColumnDirective field='EmployeeID' width='100' textAlign="Right"/> <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/> <ColumnDirective field='ShipCountry' width='100'/> </ColumnsDirective> </GridComponent>); } export default App;

Run the application

Start the development server with the following command:

npm start

or

 yarn start

The output will appears as follows.

import * as React from 'react'; import * as ReactDom from 'react-dom'; import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; function App() { const data = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 } ]; return (<GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' width='100' textAlign="Right"/> <ColumnDirective field='CustomerID' width='100'/> <ColumnDirective field='EmployeeID' width='100' textAlign="Right"/> <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/> <ColumnDirective field='ShipCountry' width='100'/> </ColumnsDirective> </GridComponent>); } export default App; ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react'; import * as ReactDom from 'react-dom'; import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; function App() { const data = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 } ]; return ( <GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' width='100' textAlign="Right"/> <ColumnDirective field='CustomerID' width='100'/> <ColumnDirective field='EmployeeID' width='100' textAlign="Right"/> <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/> <ColumnDirective field='ShipCountry' width='100'/> </ColumnsDirective> </GridComponent> ); } export default App; ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html> <html lang="en"> <head> <title>Syncfusion React Button</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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-grids/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-buttons/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> <style> #loader { color: #008cff; height: 40px; left: 45%; position: absolute; top: 45%; width: 30%; } </style> <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> </body> </html>

For more options and features, see the Grid component documentation.