SPFx CRUD Operations (Part 1) | Get SharePoint List Data in Fluent UI DetailsList using React & PnP

Описание: In this SPFx CRUD Operations series (Part 1), we’ll learn how to get SharePoint list data and display it in a Fluent UI DetailsList using React and PnP JS.

This video is perfect for beginners and developers who want to build modern SharePoint Framework (SPFx) web parts with Fluent UI styling and PnP JS for simplified SharePoint data access.

🔍 What you’ll learn in this video:

How to set up an SPFx web part with React

How to connect to a SharePoint list using PnP JS

How to fetch list items and display them in a Fluent UI DetailsList

Tips for rendering clean and responsive data tables


⚙️ Tech Used:

SharePoint Framework (SPFx)

React JS

Fluent UI

PnP JS

SPFx Tutorial:

SPFx Web Part Lifecycle Explained with React | SharePoint Developer Tutorial & Interview Questions :    • SPFx Web Part Lifecycle Explained with Rea...  

SPFx Inserting Data in List Using PnP, React JS, and TypeScript | SharePoint Framework Customization :    • SPFx Inserting Data in List Using PnP, Rea...  

SPFx Getting data from List using Pnp React js | Spfx getting data in fluent UI detail list :    • SPFx Deleting Data From List Using PnP Rea...  

SPFx Updating Data in List Using PnP, React JS, and TypeScript | SharePoint Framework Customization :    • SPFx Updating Data in List Using PnP, Reac...  



📘 Next in this series: Add, Edit, and Delete operations in SharePoint lists using SPFx and PnP JS.

👉 Don’t forget to like, share, and subscribe for more SPFx + Power Platform tutorials!

#SPFx #SharePoint #PnPJS #FluentUI #CRUD #React #SharePointFramework #Microsoft365Developer