Building SharePoint SPFx Web Parts with React in 2025
The complete guide to building modern SharePoint SPFx web parts with React, TypeScript, and the PnPjs library — covering state management, API calls, and deployment.
Why SPFx + React Is the Standard for SharePoint Development
The SharePoint Framework (SPFx) is Microsoft's supported extensibility model for SharePoint Online and SharePoint Server 2019+. When combined with React and TypeScript, it provides a modern, maintainable development experience that integrates naturally with the Microsoft 365 ecosystem.
At VFL Technologies, every SharePoint customisation we build uses SPFx. The alternative — classic SharePoint customisation with JavaScript injection — is unsupported, brittle, and increasingly blocked by Microsoft 365 security policies.
Project Setup and SPFx Toolchain
SPFx requires Node.js 18 LTS and Yeoman with the SharePoint generator. After scaffolding, your project includes webpack, gulp, and TypeScript pre-configured. Do not fight the toolchain — SPFx has specific Node version requirements that change with each SPFx version. Use nvm to manage Node versions and pin the version in an .nvmrc file.
The generator creates your web part class, a React component, and a CSS module. Start by enabling strict TypeScript (strict: true in tsconfig.json) before writing a single line of application code.
Using PnPjs for SharePoint Data Access
PnPjs is the community-maintained library for accessing SharePoint REST APIs and Microsoft Graph from SPFx. It eliminates the verbose fetch calls, handles authentication context automatically, and provides a fluent API that is far more readable than raw REST.
Initialise PnPjs once in your web part's onInit method, passing the SPFx context. From any component, import the sp object and call sp.web.lists.getByTitle("Projects").items.select("Title","Status","AssignedTo").getAll() — three lines replacing what would be a 30-line fetch call with error handling.
State Management in SPFx Web Parts
For simple web parts, React useState and useEffect are sufficient. For web parts with complex data flows — multiple API calls, cross-component communication, or caching requirements — use React Context with useReducer rather than pulling in Redux or Zustand. SPFx bundle size limits make large state management libraries a risk.
Keep your data fetching in custom hooks (useProjectList, useUserProfile) and pass data down as props. This makes components testable with mock data without a SharePoint environment.
Deployment and Tenant-Wide Deployment
SPFx solutions are packaged as .sppkg files and deployed to the SharePoint App Catalog. For enterprise deployments, enable tenant-wide deployment — the solution becomes available to all site collections without manual app installation.
For CI/CD, use Azure DevOps with a pipeline that runs gulp bundle --ship and gulp package-solution --ship, then uploads the .sppkg to the App Catalog using the CLI for Microsoft 365 (m365 spo app add and m365 spo app deploy). Automated deployment of SharePoint solutions in under 10 minutes from code commit is entirely achievable.