Introduction to SPFx Development with React: Listing SharePoint Items Using PnPJS

In this article, you’ll learn how to create React components within the SharePoint Framework (SPFx) using the PnPJS library to interact with SharePoint lists. We’ll walk through a simple example of building a component that displays items from a SharePoint list when a button is clicked.

What You’ll Learn

1. How to create a React component in SPFx.
2. How to use React hooks (useState, useEffect) for managing component state.
3. How to configure PnPJS in your SPFx project to access SharePoint lists.
4. How to render SharePoint list items dynamically in a React component.

Step-by-Step Guide

1. Setting Up the SPFx Project

To get started, create a new SPFx project using Yeoman:

yo @microsoft/sharepoint

When prompted, choose the following options:

• Extension Type: Select “WebPart”.
• Framework: Choose “React”.
• WebPart Name: Name it something like “PnPJSListExample”.

This will set up the basic structure for your SPFx project with React.

2. Configuring PnPJS in the SPFx Project

You’ll need to install and configure PnPJS to work with your SharePoint lists. Install the necessary packages by running the following command in your project root:

npm install @pnp/sp @pnp/logging @pnp/common @pnp/odata

Next, configure PnPJS in your SPFx project by creating a utility function to initialize it:

// src/configpnp/pnpjsConfig.ts

import { SPFI, spfi } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import { WebPartContext } from "@microsoft/sp-webpart-base";

let sp: SPFI;

export const getSP = (context: WebPartContext): SPFI => {
  if (!sp) {
    sp = spfi().using(SPFx(context)); 
  }
  return sp;
};

This function will ensure that PnPJS is set up with the correct context from SPFx.

3. Creating the React Component

Now, let’s create a React component to fetch and display the list items.

// src/components/MostrarItemsDeLista.tsx

import * as React from 'react';
import { useState } from 'react';
import { SPFI } from '@pnp/sp';
import { getSP } from '../configpnp/pnpjsConfig';
import { WebPartContext } from '@microsoft/sp-webpart-base';

export interface IListaItems {
  Title: string;
  Id: number;
}

interface IProps {
  context: WebPartContext;
}

const MostrarItemsDeLista: React.FC<IProps> = ({ context }) => {
  const [items, setItems] = useState<IListaItems[]>([]);
  const [loaded, setLoaded] = useState(false);

  // Function to load list items
  const loadItems = async () => {
    const sp: SPFI = getSP(context);
    const listItems: IListaItems[] = await sp.web.lists.getByTitle("YourListName").items();
    setItems(listItems);
    setLoaded(true);
  };

  return (
    <div>
      <button onClick={loadItems}>Load List Items</button>
      {loaded && (
        <ul>
          {items.map((item) => (
            <li key={item.Id}>{item.Title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MostrarItemsDeLista;

This component uses React hooks:

• useState: To manage the state of the list items and whether the items are loaded.
• loadItems: An asynchronous function that fetches items from a SharePoint list using PnPJS.

4. Integrating the Component with the Web Part

Next, we’ll render this component in your SPFx WebPart. Here’s how you can modify your WebPart file:

// src/webparts/pnpjsListExample/PnpjsListExampleWebPart.ts

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import MostrarItemsDeLista from './components/MostrarItemsDeLista';

export default class PnpjsListExampleWebPart extends BaseClientSideWebPart<{}> {

  public render(): void {
    const element = React.createElement(
      MostrarItemsDeLista,
      { context: this.context } // Pass context as prop
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

In this code, we use the SPFx context and pass it to the MostrarItemsDeLista component as a prop, ensuring that the SharePoint context is available when calling PnPJS methods.

5. Running and Testing

To test your solution, run the following commands:

gulp serve

You can then preview your web part in the SharePoint Workbench.

Conclusion

In this example, we created a React component that loads items from a SharePoint list using PnPJS and displays them when a button is clicked. This is a basic example, but the structure and concepts can be expanded to more complex scenarios, such as editing or deleting list items.

Key Learnings

• React Hooks: useState for state management and useEffect for lifecycle events.
• PnPJS: A powerful library to interact with SharePoint lists and libraries.
• SPFx Context: Understanding how to pass the SPFx context into React components to use SharePoint resources.

Learn More

• Official SPFx Documentation
• PnPJS Documentation
• React Hooks Overview
• SPFx Development Environment Setup

By mastering these techniques, you’ll be able to create dynamic and interactive components in SharePoint using SPFx and React!