Great Examples to Study & the Best Resources
Lesson 11: Great Examples to Study & the Best Resources
The fastest way to get good at SharePoint customization is to read code that ships. The PnP (Patterns and Practices) community — Microsoft-supported and fiercely active — maintains the canonical sample libraries, and almost every pattern you'll ever need already exists in one of them. Everything in this lesson was HTTP-verified while writing the course.
The sample repositories (start here)
| Repository | What's inside |
|---|---|
| pnp/sp-dev-fx-webparts | 300+ web part samples across React, no-framework, Angular, Vue, jQuery — each with its own README, screenshots, and setup instructions. Actively maintained (commits daily). |
| pnp/sp-dev-fx-extensions | Application customizer, field customizer, list view command set, and form customizer samples — the extension patterns from Lesson 6, production-tested. |
| pnp/sp-dev-fx-controls-react | 100+ reusable React controls for SPFx (people picker, date time picker, file picker, accordion…). Check this before building any common UI yourself. |
The searchable gallery
Browsing GitHub folders is fine; searching beats it. The SPFx Samples Gallery renders the whole web-parts collection as a filterable site — filter by SPFx version, framework, and component type to find "the sample for exactly what I'm building." The React controls also have full docs at pnp.github.io/sp-dev-fx-controls-react.
Six standout samples worth studying
| Sample | Why study it |
|---|---|
| react-hooks | Modern React Hooks in an SPFx context — useState/useEffect driving SharePoint data. The pattern template for any new React web part. |
| js-command-clone | A production-shaped list view command set: dialog handling, form processing, REST calls. Study it before writing your own toolbar buttons. |
| js-application-appinsights | Application Insights wired into an application customizer — init, custom events, error reporting. The blueprint for observability on every site. |
| js-application-header-toggler | DOM manipulation and CSS injection against the SharePoint header via an application customizer — shows how far you can push the top placeholder. |
| js-application-analytics | Injects Google Analytics / Adobe Analytics across all pages. The canonical "load a script site-wide" customizer, with configuration options documented. |
| angular-migration | Migrating an AngularJS-era web part forward. Read it when you inherit legacy SPFx code. |
.manifest.json reveals the component contract; (3) the web part / extension entry file shows the wiring; (4) then follow the data flow — context → service → render. Clone the repo, scaffold the matching SPFx version, and run the sample locally before you change a line.
Official docs & learning paths
- SharePoint developer documentation — the root hub; everything hangs off it.
- Extend SharePoint — Associate learning path (≈11 hours, certification-aligned). Shortcut: aka.ms/spfx-training.
- SPFx overview — the current-vision reference.
Tooling docs & community
- CLI for Microsoft 365 docs · repo — 500+ commands, cross-platform.
- PnP PowerShell docs · repo — 700+ cmdlets, updated almost daily.
- Microsoft 365 & Power Platform community hub (aka.ms/m365pnp) — blog, weekly community calls, guidance.
- Veronique Lengelle's blog — MVP writing on SharePoint, PowerShell, and Power Platform.
- SharePoint Maven — practical, out-of-the-box-first guidance.
🧠 Knowledge Check
1. Where do you find hundreds of community SPFx web part samples with READMEs and screenshots?
2. Which library should you check before building a people picker or date picker from scratch?
3. What is the official, certification-aligned way to learn SPFx end to end?