Aqui está um passo a passo para criar uma Web Part no SharePoint usando SPFx (SharePoint Framework) e PnPjs para obter dados de uma lista:

Passo 1: Configurar o Ambiente de Desenvolvimento

1. Instale Node.js:
   
   Certifique-se de ter o Node.js instalado. Você pode baixá-lo aqui.
   
2. Instale o Yeoman e o Gerador do SharePoint:
   
   npm install -g yo @microsoft/generator-sharepoint

Passo 2: Criar um Novo Projeto SPFx

1. Crie uma nova pasta para o projeto:
   
   md spfx-pnpjs-example

cd spfx-pnpjs-example
   
2. Execute o gerador do SharePoint:
   
   yo @microsoft/sharepoint
   
   • Nome do projeto: spfx-pnpjs-example
     
   • Descrição: Exemplo de Web Part usando PnPjs
     
   • Framework: Escolha React (ou outro de sua preferência)

Passo 3: Instalar e Configurar o PnPjs

1. Instale o PnPjs:
   
   npm install @pnp/sp @pnp/logging --save
   
2. Configure o PnPjs no seu projeto:
   • No arquivo src/webparts/[nomeDaWebPart]/[NomeDaWebPart].ts,
     
     Importe e configure o PnPjs:
     
     TypeScript
     
     import { sp } from "@pnp/sp";

import "@pnp/sp/lists";

import "@pnp/sp/items";

sp.setup({
   • sp: { baseUrl: this.context.pageContext.web.absoluteUrl, }, });
     
     

Passo 4: Criar a Lógica para Obter Dados da Lista

1. Adicione uma interface para o modelo de dados:
   • Crie um arquivo src/webparts/[nomeDaWebPart]/IListItem.ts:
     
     TypeScript
     
     export interface IListItem { Title: string; Id: number; }
     
2. Modifique o componente para buscar dados da lista:
   • No
     arquivo 
     
     src/webparts/[nomeDaWebPart]/components/[NomeDaWebPart].tsx,
     
     adicione a lógica para obter dados:
     
     TypeScript
     
     import * as React from 'react'; import { sp } from "@pnp/sp";

import { IListItem } from '../IListItem';

export default class [NomeDaWebPart] extends React.Component<{}, {

items: IListItem[] }> { constructor(props: {}) {

super(props);

this.state = { items: [] }; } public componentDidMount(): void { this._getListItems(); }
   • 
     private async _getListItems(): Promise<void> {

const items: IListItem[] = await

sp.web.lists.getByTitle("NomeDaLista").items.getAll();

this.setState({ items }); } public render():

React.ReactElement<{}> { return ( <div> <h2>Itens da

Lista</h2> <ul> {this.state.items.map(item => ( <li key=

{item.Id}>{item.Title}</li> ))} </ul> </div> ); } }
     

Passo 5: Testar e Implantar a Web Part

1. Execute o projeto localmente:
   
   gulp serve
   
2. Implante a Web Part:
   • Execute os comandos:
     
     gulp bundle --ship

gulp package-solution --ship
   • 
     Carregue o arquivo .sppkg gerado no catálogo de aplicativos do SharePoint e adicione a Web Part ao seu site.