Introduction

Dynamic user interfaces are essential in today’s web development. React is a JavaScript library that Facebook maintains that has gained popularity for its efficiency, reusability, and simplicity. The combination of SPFx with React enables developers to produce responsive and dynamic web elements, increasing the possibilities for developing effective SharePoint solutions.

Why Choose React and SPFx?

SharePoint Framework provides a modern and flexible framework for building solutions within SharePoint. On the other hand, React simplifies UI development with its component-based structure. When used in combination they offer a powerful toolkit for developers promoting code reusability, and enhancing the user experience.

Getting Started with React and SPFx

Step 1. Set Up Your Development Environment

Before you start, ensure that Node.js and Yeoman are installed on your machine. These tools are essential for creating and managing SPFx projects. Open your terminal and execute the following commands

# Install Yeoman and gulp globally
npm install -g yo gulp
# Install the SharePoint generator
npm install -g @microsoft/generator-sharepoint

Step 2. Run the following command to scaffold a new SPFx project

yo @microsoft/sharepoint

After running this command, you will be prompted to provide essential details such as the project name, description, and the type of web part you wish to create. Choose the React framework option when prompted. Yeoman will then generate all the necessary project files and folder structures for your SharePoint Framework (SPFx) solution.

Step 3: Trusting the Self-Signed Developer Certificate

After scaffolding an SPFx project, it is important to establish a secure connection between the development environment and SharePoint. This can be done by trusting the self-signed developer certificate that comes with SPFx projects. Once you have created a project with the Yeoman generator for the SharePoint Framework, you need to execute the following command from the root folder of the project.

gulp trust-dev-cert

Step 4: Build Your React Components

When working on SPFx with react projects, it’s best to create React components within the “src” directory. To keep things organized, you can create a “web parts” folder within the “src” directory, where you can group your components based on the specific web parts they belong to. To get started, navigate to the “src/webparts” directory in your newly created project. Here, you’ll find a folder for your web part, named after it (for example, “helloWorld”). Within this folder, there’s a file called “HelloWorld.tsx”, which contains a basic React component. You can customize this component or create new ones to suit your project’s specific requirements.

You typically start with a default class component which serves as the backbone of your SharePoint web part. However, you can increase simplicity and efficiency by converting it into a functional component.

Default class component Code

import * as React from 'react';
import styles from './Helloworld.module.scss';
import { IHelloworldProps } from './IHelloworldProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Helloworld extends React.Component<IHelloworldProps, {}> {
  public render(): React.ReactElement<IHelloworldProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.helloworld}`}>
        <div className={styles.welcome}>
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value:{escape(description)}</div>
          <h3>Welcome to SharePoint Framework!</h3>
        </div>
      </section>
    );
  }
}

In React, functional components are a concise and modern way to define UI elements. If the default class component in your SharePoint project seems heavy, you can opt for a functional component instead.

Converted functional Component:

import * as React from 'react';
import styles from './Helloworld.module.scss';
import { IHelloworldProps } from './IHelloworldProps ';
import { escape } from '@microsoft/sp-lodash-subset';

const Helloworld: React.FC<IHelloworldProps > = (props) => {
  return (
    <section className={`${styles.helloworld}`}>
      <div className={styles.welcome}>
        <h2>Well done, {escape(userDisplayName)}!</h2>
        <div>{environmentMessage}</div>
        <div>Web part property value:{escape(description)}</div>
        <h3>Welcome to SharePoint Framework!</h3>
      </div>
    </section>
  );
};
export default Helloworld;

Step 5: SharePoint REST APIs

Once your React component is built, it’s time to integrate SharePoint data to improve its usefulness. Giving your web components data-driven and dynamic functionality. The REST APIs that SharePoint offers are rich enough to let you work with lists, libraries, and other SharePoint entities to execute CRUD (Create, Read, Update, Delete) actions. Here’s how to integrate SharePoint REST APIs into your React components to improve their functionality.

Make sure to install the @microsoft/sp-http package before starting. It contains the client-side libraries required to send HTTP requests.

npm install @microsoft/sp-http --save

Once the necessary package has been installed, you can call SharePoint REST APIs asynchronously by using the HttpClient. To make HTTP queries, import the required dependencies, such as HttpClient, SPHttpClient from @microsoft/sp-http and React.

import * as React from 'react';
import { HttpClient, SPHttpClient } from '@microsoft/sp-http';

interface IListDataProps {
  context: any; // Adjust the type as per your requirements
}
const ComponentName: React.FC<IListDataProps > = ({ context }) => {
  const [yourData, setYourData] = React.useState<any[]>([]);

Utilize the useEffect and useState hooks to make SharePoint REST API calls and manage the component’s state

const loadListData = async (): Promise<void> => {
 try {
  const apiUrl: string = `${context.pageContext.web.absoluteUrl}/_api/web
  /lists/getByTitle('YourList')/items`;
  const response = await context.httpClient
  .get(apiUrl, SPHttpClient.configurations.v1);

  if (response.ok) {
    const data = await response.json();
    setYourData(data);
  } else {
    console.log('Failed to fetch data from SharePoint. Error:'
    ,response.statusText);
    }
  } catch (error) {
     console.log('Error loading data from SharePoint:', error);
    }
};

React.useEffect(() => {
  loadListData();
}, []); // Run once when the component mounts

Integrate the retrieved data into your functional component’s JSX

// ... rest of your component
  return (
    <div>
      {/* Your component JSX using the 'yourData' state */}
    </div>
  );
};
export default ComponentName;

Step 6: Test Locally and Debug

Run the following command to launch the local workbench and test your functional component locally

gulp serve

Navigate to the provided local workbench URL in your browser (usually http://localhost:4321/temp/workbench.html) add your web part, and ensure it functions as expected. Use the browser’s developer tools and Visual Studio Code for effective debugging.

Step 7: Build and Package for Deployment

Once thoroughly tested, execute the following commands to bundle and package your solution for deployment

gulp build
gulp bundle --ship
gulp bundle --debug
gulp package-solution --ship

Upload the generated .sppkg file to your app catalog in SharePoint to deploy your functional component

Conclusion

In this post, we looked at how SPFx with React can be seamlessly integrated, allowing you to create responsive and dynamic web elements. Everything from setting your environment to integrating SharePoint REST APIs into a functional component has been covered. These tools allow you to take your SharePoint projects to the next level and allow your creativity to thrive in the dynamic realm of web development by leveraging the power of React and SPFx.

About the Author:

Mohd Nadeem

With over 2 years of experience as a Senior Software Engineer, I specialize in both frontend and backend development, making me a versatile full-stack developer. I am proficient in creating responsive, dynamic user interfaces using React.js, JavaScript, HTML5, and CSS3, and delivering robust backend solutions with Node.js and Express.js.

In my current role, I have led the development of complex UI designs, implemented secure authentication systems with OAuth and JWT, and optimized application performance. My technical stack includes experience with AWS (EC2, S3), MySQL, TypeScript, and Sequelize.

I am passionate about staying at the forefront of technology, continuously learning, and contributing to innovative projects. My goal is to help companies build scalable and secure web applications, whether through frontend, backend, or full-stack development.

Featured Skills:
– Frontend Development: React.js, JavaScript, HTML5, CSS3
– Backend Development: Node.js, Express.js
– Full-Stack Development
– AWS (EC2, S3)
– MySQL
– TypeScript
– Sequelize
– Authentication: OAuth, JWT

Reference:

Nadeem, M (2024). SPFx with React: A Guide to React and SPFx Integration. Available at: SPFx with React: A Guide to React and SPFx Integration – ABSYZ [Accessed: 26th September 2024].