On this page, I am bringing all the important SharePoint Framework tutorials together so you can follow a clear path and jump to specific topics when you need them. I have grouped the tutorials into a few focused categories: setup, web parts, Fluent UI, CRUD and data, extensions, MS Graph, troubleshooting, and interview preparation.
What is SharePoint Framework (SPFx) and why use it?
SharePoint Framework (SPFx) is the modern development model for building custom solutions on top of SharePoint Online and SharePoint Server. I like to think of SPFx as the way to build client‑side web parts, extensions, and integrations that run seamlessly in the modern SharePoint experience using TypeScript, React, and standard web technologies.
Organizations and developers use SPFx because it is fully supported in Microsoft 365, works great with the SharePoint Online modern UI, and gives you full control over the user experience. You can integrate with Microsoft Graph, use Fluent UI, call REST APIs, and package everything in solutions that are easy to deploy through the app catalog.
Whether you are building internal tools, intranet components, or reusable web parts for multiple clients, SPFx gives you a powerful, future‑proof way to do it.
If you are new to SPFx, start with the setup and fundamentals section below, and then work your way toward real‑world web parts, extensions, and integrations.
Who is this SPFx tutorials hub for?
This SPFx tutorials hub is designed for SharePoint developers, Power Platform consultants, and Microsoft 365 professionals who want to move beyond out‑of‑the‑box features and build custom solutions. If you are just starting with SPFx, you can treat this as a learning path: first set up your development environment, then create basic web parts, then move into Fluent UI, CRUD, extensions, and advanced patterns.
If you already have SPFx experience, you can use this hub as a quick reference for specific problems: pagination, form validation, MS Graph integration, list command sets, property pane customization, Heft migration, and more. Each tutorial is written in a practical, step‑by‑step way so you can directly apply it to your real client projects.
How to follow this SPFx learning path
If you are a complete beginner to SPFx, start with SPFx setup and fundamentals to prepare your development environment and understand the basics of client‑side web parts. Then move to SPFx web parts and UI patterns to learn how to build and configure real web parts in SharePoint.
Once you are comfortable, go through Fluent UI controls in SPFx, CRUD operations, and data access to handle real data and build proper forms. After that, tackle SPFx extensions and command sets, MS Graph, and integrations to extend SharePoint and connect to Microsoft 365.
Finally, use the Troubleshooting and errors, SPFx interview questions, and career sections as ongoing references for production work and career growth.
1. SPFx setup and fundamentals
Start here to set up your development environment and learn the core building blocks of an SPFx solution. This section is ideal if you are new to SPFx or moving from classic script-editor-style customizations to the modern development model.
- Prepare your dev machine end‑to‑end with Set up development environment for SharePoint Framework
- Create your first client‑side solution with SharePoint Framework client web part
- Understand solution structure and naming with Change solution name in SPFx
- Learn how to add more functionality later using Add new web part in SPFx solution
- Create lists and libraries from code using Create a SharePoint list or library in SPFx
- Generate lists programmatically with Create list in SPFx using PnP or REST
2. SPFx build tools, environment variables, and Heft
This section helps you deal with tooling, environment variables, and the move from Gulp to Heft in modern SPFx projects. Use it when you are upgrading solutions or working with more advanced build scenarios.
- Configure per‑environment settings with SPFx environment variables
- Modernize your build pipeline with Migrate Gulp to Heft in SPFx
- Start new projects on the latest tooling using Set up SPFx project with Heft
3. SPFx web parts and UI patterns
Use this section to learn how to design and build SPFx web parts that deliver real business value. These tutorials show you how to create web parts, configure icons, add preconfigured entries, work with modals, and build rich UI patterns like accordions and countdown timers.
- Build your first functional client web part with SharePoint Framework client web part
- Design an eye‑catching timer using SPFx countdown timer web part
- Add collapsible sections using Create SPFx web part with jQuery accordion
- Create dynamic UI sections using SPFx dynamic accordion web part with PnP React controls
- Customize the look of your web part icon with Configure web part icon in SPFx
- Provide ready‑made configurations with SPFx preconfiguredEntries explained
- Show dialog boxes and forms using Create modal popup in SPFx
- Manage complex settings with SPFx property pane slide manager (drag and drop)
4. Fluent UI controls in SPFx
Fluent UI is the standard UI framework for Microsoft 365. In this section, I show you how to use Fluent UI React controls inside SPFx web parts to build professional, consistent interfaces.
- Start with dropdowns using SPFx Fluent UI React Dropdown
- Bind real list data to controls using Bind SharePoint list items to SPFx Fluent UI React dropdown
- Display lists of items using SPFx Fluent UI Basic List
- Build advanced selection UIs with SPFx Fluent UI React ChoiceGroup and Checkbox
- Allow searching and selection using Fluent UI React ComboBox control in SPFx
- Show document cards and previews with Fluent UI DocumentCard in SPFx web part
- Let users pick colors visually using SPFx SwatchColorPicker Fluent UI React control
5. CRUD operations and data access in SPFx
Most real SPFx solutions need to read and write data. This section focuses on CRUD operations, pagination, and working with SharePoint lists and document libraries from SPFx web parts.
- Read list data from SharePoint using Retrieve SharePoint list items using SharePoint Framework
- Implement full create/read/update/delete with SharePoint Framework CRUD operations using React
- Build CRUD without frameworks using SharePoint Framework CRUD operations with no JavaScript framework
- Add pagination easily using PnP React pagination control in SPFx
- Upload documents with metadata using SPFx upload file to SharePoint document library with metadata
- Create folders and nested structure using Create folders and subfolders in SharePoint document library using SPFx
- Create lists and libraries programmatically with Create a SharePoint list or library in SPFx
- Create SharePoint lists from scratch using Create list in SPFx
6. SPFx forms, validation, and formatting
Good forms matter for usability. Use this section to learn how to build and validate forms in SPFx and how to handle date formatting and user‑friendly experiences.
- Add robust validation rules using SPFx form validation techniques
- Format date values cleanly with Format dates in SPFx
- Build rich, configurable web parts using SharePoint client‑side web part configurable properties in property pane using SPFx
- Add advanced property fields using Add custom controls in SPFx property pane
7. SPFx extensions and command sets
SPFx extensions let you customize list views, command bars, and pages beyond web parts. This section helps you build and control those extensions.
- Customize the list command bar download button using Customize SharePoint list command bar download button using SPFx extension
- Add custom commands to list views with SPFx ListView command set extension tutorial
- Restrict commands to specific lists using Restrict SPFx ListView command set to specific list
- Change how fields are rendered using SharePoint Framework extension Field Customizer
- Inject custom scripts or placeholders using SPFx application customizer tutorial
- Show content to specific audiences using SPFx web part audience targeting
8. MS Graph, site data, and integrations in SPFx
Use these tutorials to connect your SPFx solutions to Microsoft Graph and other APIs, so you can send emails, read site data, and build integrated solutions.
- Send mail from another account using Send email on behalf of another user in SPFx using MS Graph
- Get current site information using Get current SharePoint site information in SPFx using MS Graph API
- Send email without MS Graph using SPFx send email using PnPJS
9. SPFx user experience and specialized web parts
This section groups tutorials focused on building specialized user experiences, from folder trees to user profile web parts.
- Build a folder tree navigation using Build a SharePoint folder tree view using SPFx
- Show personalized user details with SharePoint Framework user profile web part
10. SPFx errors, troubleshooting, and common issues
Real‑world SPFx work always involves troubleshooting. Use this section to quickly fix common errors and keep your development moving.
- Fix general failures using “Sorry, something went wrong” error in SPFx – fix
- Resolve build issues with SPFx error – check your network connection
- Fix JSON parsing problems using SPFx unexpected startObject/startArray JSON error – fix
- Solve entry loading problems with SPFx serve – the API entry could not be loaded
- Fix missing Gulp file errors with No gulpfile found in SPFx – how to fix
- Resolve module resolution issues using Cannot find module ‘jquery’ in SPFx – fix
11. SPFx interview questions and career support
If you are preparing for SPFx developer roles or want to validate your knowledge, use this section to practice real interview‑style questions.
- Prepare for SPFx roles with SharePoint Framework interview questions and answers
How to use this SPFx tutorials hub
You can use this SPFx tutorials hub as a structured learning path or as a quick reference while working on real projects. If you are just starting, go in order: setup and fundamentals, web parts, Fluent UI, CRUD, extensions, and then Graph and troubleshooting. If you are already building SPFx solutions, jump straight into the topic you need—whether that is pagination, form validation, MS Graph, list command sets, or error fixes.
Over time, I will keep updating this page as new SPFx versions, build tools, and best practices are released, so you always have a single place to start and grow your SharePoint Framework skills.
Explore other tutorial hubs
If you are building full Microsoft 365 solutions, SPFx is just one part of the story. I have separate tutorial hubs for Power Apps, Power Automate, Power BI, Microsoft Teams, Copilot Studio, and more, so you can combine SPFx with low‑code tools and administration skills. Use these links to explore each area in depth and build end‑to‑end solutions.
- Learn SharePoint development and customization with all SharePoint tutorials
- Design low‑code business apps with all Power Apps tutorials
- Automate workflows and integrations with all Power Automate tutorials
- Create reports and dashboards with all Power BI tutorials
- Improve collaboration and apps in Teams with all Microsoft Teams tutorials
- Build AI copilots and bots with all Microsoft Copilot Studio tutorials
- Build secure, data‑driven business websites using all Power Pages tutorials.
- Script administration and automation with all PowerShell tutorials
- Strengthen your web dev skills with all TypeScript tutorials
Join the premium SPGuides Academy
If you want to move beyond standalone tutorials and learn SPFx through complete, real‑time projects, you can join my premium SPGuides Academy. Inside the academy, I provide full training courses, hands‑on labs, and ready‑to‑use digital products based on real client scenarios in SharePoint, SPFx, Power Apps, Power Automate, and the broader Microsoft 365 ecosystem.
As a member, you can follow structured learning paths, download solution packages, and see how I design and build production‑ready components step by step. This is ideal if you want to accelerate your career as a SharePoint developer or consultant, build your own products, or confidently deliver solutions for your customers.
Final thoughts
This SharePoint Framework tutorials hub is here to support you from your very first SPFx setup through advanced scenarios such as Fluent UI, MS Graph, extensions, and complex list integrations. You can bookmark this page and come back whenever you need a concrete, step‑by‑step guide for a specific pattern or error. As Microsoft updates SPFx and the underlying toolchain, I will keep refreshing and adding tutorials to keep this hub relevant for real‑world projects.
Whether you are transitioning from classic SharePoint customization, growing as a Power Platform consultant, or already working as a full‑time Microsoft 365 developer, my goal is to make your SPFx journey more practical, faster, and easier to apply to real client work.
