Introduction
Imagine you're a developer for an organization that relies on SharePoint Online as the hub for its intranet and team collaboration sites. Business units across the company constantly ask for functionality the out-of-the-box web parts can't deliver: one department wants a dashboard that surfaces data from a line-of-business system, the HR team wants a directory built from Microsoft Graph profile data, and site owners want reusable components they can drop onto any page and configure themselves.
Delivering these experiences with older customization approaches meant wrestling with server-side code, full-trust solutions, and brittle deployments—an approach that no longer fits the modern, client-side SharePoint experience. You need a supported, modern way to extend SharePoint that runs in the browser, uses the tools your front-end developers already know, and produces components that site owners can add and configure without writing code.
The SharePoint Framework (SPFx) is built for exactly this. Its client-side web parts are configurable, reusable components written with TypeScript and modern JavaScript tooling. They render in the browser, can access Microsoft Graph and other APIs, and integrate naturally with the modern SharePoint, Microsoft Teams, and Viva experiences.
In this module, you'll explore the structure of a SharePoint Framework project and its build toolchain, then create your first client-side web part. You'll test it in both the local and SharePoint-hosted Workbench, and finish by exploring several capabilities of the SharePoint Framework API that make building rich web parts easier.
Prerequisites
- Experience using SharePoint Online at the intermediate level
- Ability to program with JavaScript, TypeScript, and Node.js
- Experience using Visual Studio Code at the intermediate level
- Access to a Microsoft 365 tenant
Learning objectives
- Create a client-side web part with the SharePoint Framework
- Demonstrate how to test a web part using the SharePoint-hosted workbench
- Explore parts of the SharePoint Framework API
More resources
Refer to the following repository for more resources associated with this module. This repository includes completed code samples from the exercise units found in this module: Developing with the SharePoint Framework: Web Parts.
This module is also available as a screencast: SharePoint Framework Training - Developing with the SharePoint Framework: Web Parts