SPFx Development Step By Step: SharePoint Framework Guide

Step By Step SPFx Development teaches you to build SharePoint Framework (SPFx) web parts, from setting up the toolchain to a deployed application that uses Microsoft Graph. It is for SharePoint and Microsoft 365 developers, web developers moving into the Microsoft ecosystem, and SharePoint professionals who want to build modern customisations rather than classic ones.

The course covers the SPFx toolchain and environment, the SharePoint REST API with Postman, a full create, read, update and delete (CRUD) web part, a React and PnPjs version with a proper service layer, and finally a web part built on Microsoft Graph. It is very hands-on, with 20 learning assignments and 5 coding practice challenges across 59 videos, about 7.3 hours in total. Everything is free on YouTube and listed on the SPFx development course page.

Who this course is for

• SharePoint developers moving to the modern SharePoint Framework.
• Web developers with JavaScript or React experience who need to build for SharePoint and Microsoft 365.
• Microsoft 365 consultants who are asked to deliver custom web parts.
• Learners who prefer assignments to lectures, because nearly every section ends with something to build.

The catalog marks it Intermediate. You should know JavaScript, and some familiarity with React will help in the later sections.

What you will learn

1. Background and tooling. SharePoint development evolution history, the SPFx development toolchain, environment compatibility and the application lifecycle management (ALM) of SPFx solutions. Understanding the toolchain and ALM early explains why an SPFx project is set up the way it is.

2. Environment setup. Setting up the SPFx development environment, an Outlook account, a Microsoft 365 tenant, the app catalog and a site collection, plus an SPFx Docker container and remote development. A working environment is often the hardest part for newcomers, so this section is detailed.

3. Your first web part. Create First SPFX WEB PART Solution, a two-part look at the solution structure, Learning Assignment 1 and the first coding challenge.

4. The SharePoint REST API with Postman. An introduction to the REST API, setting up a list and Postman, configuring Postman for SharePoint, and Learning Assignments 2–5 to create, read, update and delete list items. Testing calls in Postman first makes the code that follows much easier to debug.

5. A CRUD client-side web part. Learning Assignments 6–12 build the user interface, then the create, read, update and delete functions, and finally polish the custom form with Bootstrap.

6. React, Office UI Fabric and PnPjs. Learning Assignments 13–15 restructure the app with React, build the UI with Office UI Fabric, use SPEditor, implement a service layer with PnPjs and integrate the UI with that layer. Two of these lessons run more than 35 minutes each, because this is where the app grows up.

7. Microsoft Graph in SPFx. A Graph API overview, How To Use Graph Explorer To Design and Validate, authorisation and Microsoft Graph, writing service logic with SPE Editor, a five-part Graph service layer, integration with the UI, and deploying and running the finished application.

How the course is organised

There are 59 videos and about 7.3 hours in total. The course moves through clear stages: background and setup (videos 1–13), the first web part (14–19), REST API with Postman (20–27), the CRUD web part (28–37), React and PnPjs (38–45), and Microsoft Graph (46–59), finishing with “What Next?”.

Each stage ends with an SPFx Coding Practice Challenge, five in all, so you can test yourself before moving on.

How to study it step by step

1. Get the environment fully working in the setup section before you continue. Choose either a local setup or the Docker container, not both.
2. Use a developer or test tenant for the app catalog and site collection.
3. Do every learning assignment yourself. Pause, try it first, then compare your work with the video.
4. Attempt each coding challenge without help. If you get stuck, rewatch only the lesson you need.
5. Keep Postman and Graph Explorer open in the REST and Graph sections, and prove each call there before writing it in code.
6. After Learning Assignment 15, compare the React and PnPjs version with your earlier CRUD web part. The difference in structure is the main lesson.
7. Deploy the final Graph web part to your test site, as Learning Assignment 20 does.

This course currently has no Skills Pragati hands-on lab guide, practice simulation or mock exam.

Frequently asked questions

Is the SPFx course free?

Yes. All 59 videos are free on YouTube. Follow them in order from the course page.

How long does it take?

About 7.3 hours of video, but the learning assignments and challenges take longer. Plan for six to eight weeks at a few hours per week.

Do I need a Microsoft 365 tenant?

Yes, to build and deploy web parts. The setup section shows how to set up an Outlook account, a Microsoft 365 tenant, an app catalog and a site collection.

What should I read alongside this course?

For the identity concepts behind Graph authorisation, see Learn Step By Step Microsoft Identity Platform. If you are rebuilding old customisations, SharePoint Classic Sites Modernization Guidance helps you decide what to modernize first.