SPFx with React: A Guide to React and SPFx Integration

spx with react a guide to react and spfx integration

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';

				
			

Define the component’s props and state using TypeScript. Adjust the types according to your specific requirements

				
					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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

how can salesforce experience cloud drive customer engagement rates
How Can Salesforce Experience Cloud Drive Customer Engagement Rates?
salesforce world tour essentials mumbai
Salesforce World Tour Essentials Mumbai (19 June, 2024)
benefits of using salesforce for higher education Industry
Benefits Of Using Salesforce For Higher Education Industry?
salesforce for real estate
Salesforce for Real Estate: How Salesforce CRM Can Help Realtors
salesforce consumer goods cloud store setup
A Detailed Look into Salesforce Consumer Goods Cloud Store Setup
Scroll to Top