Getting Started with SharePoint Framework using React Components

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

The 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

• System requirements for Syncfusion^® React UI components

• System requirements for the SharePoint Framework Development Environment

Set up the SharePoint project

Create a new SPFx project using the following command:

1. To initiate the creation of a new SharePoint project, run 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. During setup, you will be prompted with a series of configuration questions. Specify the appropriate options based on your requirements:

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, run the following command:

heft trust-dev-cert

Once the my-project setup is complete with the default configuration, you're ready to add Syncfusion^® React components to the project.

Add Syncfusion^® React packages

Syncfusion^® React components are available on npmjs.com. To use the React Toolbar component, install the @syncfusion/react-navigations package:

npm install @syncfusion/react-navigations --save

Import Syncfusion^® CSS styles

Syncfusion^® React components are styled using built-in themes. To apply consistent styling, create an index.scss file in the /src/webparts/app/components/ directory. Then, import the necessary Material SCSS styles for the Toolbar component and its dependencies into this file.

@use '@syncfusion/react-base/styles/themes/material' with (
    $load-roboto-font: false
);
@use '@syncfusion/react-base/styles/material.scss' as *;
@use '~@syncfusion/react-buttons/styles/material.scss' as *;
@use '~@syncfusion/react-popups/styles/material.scss' as *;
@use '~@syncfusion/react-navigations/styles/material.scss' as *;

In SharePoint Framework (SPFx) projects, the Roboto font required for Syncfusion^® Material theme is not loaded automatically. To ensure proper rendering of Syncfusion^® React components with the Material theme, you must manually load the Roboto font using SPComponentLoader.loadCss() in your App.tsx file.

Add Syncfusion^® React component

Add the React Toolbar component inside the ~/src/webparts/app/components/App.tsx file, as shown in the below code example.

import * as React from 'react';
import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';
import { Button, Color, Variant } from '@syncfusion/react-buttons';
import { MenuIcon } from '@syncfusion/react-icons';
import './index.scss';
import { SPComponentLoader } from '@microsoft/sp-loader';

export default function App(): JSX.Element {

  SPComponentLoader.loadCss("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap")

  return (
    <div className="component-section">
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

Run the project

Before running your SharePoint Framework (SPFx) project, set your tenant domain in the initialPage property inside the config/serve.json file. For detailed instructions, refer this link.

To run the project, use the following command:

npm run start

The output will appear as follows: