Getting Started with React UI Components in the SharePoint Framework

26 Mar 20256 minutes to read

This article provides a step-by-step guide for setting up a SharePoint project and integrating the Syncfusion React components.

SharePoint Framework (SPFx) is a development model and framework provided by Microsoft for building custom solutions and extensions for SharePoint and Microsoft Teams. It is a modern, client-side framework that allows developers to create web parts, extensions, and customizations that can be deployed and used within SharePoint sites and Teams applications.

Prerequisites

Set up the SharePoint project

Create a new SPFx project using the following command:

1. To initiate the creation of a new SharePoint project, use the following commands:

yo @microsoft/sharepoint

2. Let’s specify the name of the project as my-project and the name of the WebPart as App for this article. To set up additional configurations based on your requirements, it will direct you to a series of questions for the project as below:

Let's create a new Microsoft 365 solution.
? What is your solution name? my-project
? Which type of client-side component to create? WebPart
Add new Web part to solution my-project.
? What is your Web part name? App
? Which template would you like to use? React

3. To establish trust for the certificate in the development environment, execute the provided command:

gulp trust-dev-cert

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

Add Syncfusion React packages

Syncfusion React component packages are available at npmjs.com. To use Syncfusion React components in the project, install the corresponding npm package.

This article uses the React Grid component as an example. To use the React Grid component in the project, the @syncfusion/ej2-react-grids package needs to be installed using the following command:

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

Import Syncfusion CSS styles

You can import themes for the Syncfusion React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to the themes topic to learn more about built-in themes and different ways to refer to themes in a React project.

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Grid component were imported into the ~/src/webparts/app/components/App.tsx file.

require ('@syncfusion/ej2-grids/styles/material.css');

Add Syncfusion React component

Follow the below steps to add the React Grid component:

1. In App.tsx file inside the ~/src/webparts/app/components folder, declare the values for the dataSource property.

const data = [
  {
    OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
  }
];

2. Define the Grid component with the dataSource property and column definitions.

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

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    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>
    );
  }
}

Here is the summarized code for the above steps:

import * as React from 'react';
import { IAppProps } from './IAppProps';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

require('@syncfusion/ej2-grids/styles/material.css');

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    const data = [
      {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
      },
      {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
      },
      {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
      }
    ];

    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>
    );
  }
}

Run the project

To run the project, use the following command:

gulp serve

The output will appear as follows:

Grid Component