sp-dev-fx-webparts/samples/react-pnp-js-sample

Compatibility

This sample is designed to be used in the following enviroments:

page_type: sample products:

• office-sp languages:
• javascript
• typescript extensions: contentType: samples technologies:
  • SharePoint Framework platforms:
  • react createdDate: 5/1/2017 12:00:00 AM

---

SharePoint Framework sample using @pnp/js and ReactJS

Summary

This solution builds off of the solution react-async-await-sp-pnp-js submitted by Jose Quinto (@jquintozamora , blog.josequinto.com)

This implementaiton refactors to take aspects out and utilize and showcase PnPjs Version 3.

Compatibility

For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix

Applies to

• SharePoint Framework
• Microsoft 365 developer tenant

Solution

Solution	Author(s)
react-spfx-pnp-js-sample	Julie Turner (@jfj1997)

Version history

Version	Date	Comments
1.1	Aug 29, 2022	Bug fix & dependency updates
1.0	Jan 13, 2022	Initial release

Minimal Path to Awesome

1. clone this repo
2. $ npm i
3. Update online workbench url in the initialPage property of the config/serve.json file.
4. $ gulp serve

Features

• Establishing context for the SharePoint Factory Interface
• Creating a project config file to centralize defining the PnPjs imports and SharePoint Querable object for reuse.
• Demo extending the SharePoint Querables instance with the PnPLogging beavhior.
• Demo extending the SharePoing Queryable instance with the Caching behavior
• Demo loading list items from a SharePoint library
• Demo creating a batched instance of the SharePoint Querable object.
• Demo updating list items by modifying the Title property.
• Demo executing a batch and working with the results.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.