Prerequisite Learning Syllabus for SharePoint Framework (SPFx)
1. Web Development Fundamentals
- HTML5
- CSS3
- Flexbox & Grid Layout
- SASS (SCSS) Basics
- JavaScript (ES6+)
- Variables (let, const, var)
- Functions (Arrow Functions, Callbacks, Promises, Async/Await)
- Loops & Conditions
- DOM Manipulation
- Event Handling
2. TypeScript Fundamentals
- Introduction to TypeScript
- TypeScript vs JavaScript
- Variables & Data Types
- Interfaces & Type Aliases
- Classes & Objects
- Functions & Modules
- Generics
- Asynchronous Programming in TypeScript
3. Node.js & NPM
- Introduction to Node.js
- Installing & Managing Packages using NPM
- Working with package.json
- Using Node.js for Build and Development
4. React.js Fundamentals (SPFx Uses React)
- Introduction to React
- React Components (Class vs Functional)
- JSX & Virtual DOM
- Props & State Management
- Lifecycle Methods
- Event Handling in React
- React Hooks (useState, useEffect, useContext)
- Handling Forms & Events
- Conditional Rendering
- Working with Lists & Keys
5. Office UI Fabric / Fluent UI
- Overview of Fluent UI
- Fluent UI Components
- Styling with Fluent UI
6. SharePoint Basics
- Introduction to SharePoint Online
- Understanding SharePoint Sites, Lists & Libraries
- SharePoint Permissions & Security
- SharePoint REST API Basics
- SharePoint PnP JS Library
7. Microsoft 365 & Azure AD Basics
- Introduction to Microsoft 365 & Azure AD
- Authentication & Authorization Concepts
- Understanding Microsoft Graph API
- Using OAuth & Microsoft Identity Platform
8. Development Tools & Environment Setup
- Visual Studio Code Basics
- Installing Node.js & NPM
- Setting Up a Local Development Environment for SPFx
- Using Command Line & PowerShell for Development
9. Git & Version Control
- Introduction to Git
- Basic Git Commands (commit, push, pull, branch, merge)
- Working with GitHub or Azure DevOps
SharePoint Framework (SPFx) Syllabus
1. Introduction to SharePoint Framework
- Overview
- Why the SharePoint Framework?
2. Getting Started
- Setting Up Microsoft 365 Tenant
- Setting Up the Development Environment
3. Web Parts
3.1 Overview
- Introduction to SPFx Web Parts
3.2 Getting Started
- Build & Deploy Your First Web Part
- Connect Your Web Part to SharePoint
- Deploy Your Web Part to a SharePoint Page
- Host Your Web Part from Office 365 CDN
3.3 Web Part Properties & Property Pane
- Overview
- Configure Custom Properties
- Validate Web Part Properties
- Extend Property Pane
- Build Custom Controls
- Use Cascading Dropdowns
3.4 Concepts & Scenarios
- Preconfigure Web Parts
- Configure Web Part Icon
- Hide from the Toolbox
- Use Office UI Fabric React Components
- Use Full-Width Column
- Determine the Rendered Web Part Width
- Support Section Backgrounds
- Web Part Top Actions
- Isolated Web Parts
- Isolated Web Parts Retirement Announcement
- Single Part App Pages
3.5 Microsoft Teams & SPFx Web Parts
- Building Microsoft Teams Tabs
- Hosting Microsoft Teams Tabs in SharePoint
3.6 Tutorials
- Add jQueryUI Accordion to a Web Part
- Use Microsoft Graph in Web Parts
- Use Microsoft Graph Toolkit in Web Parts
- Provision Assets from a Web Part
- Build Microsoft Teams Channel/Group Tabs with SPFx
4. Extensions
4.1 Overview
- Introduction to SPFx Extensions
4.2 Getting Started
- Build Your First Application Customizer Extension
- Use Page Placeholders
- Deploy Your Extension to SharePoint
- Host Extension from CDN
- Configure Extension Icon
4.3 Extension Types
- Field Customizer Extension
- ListView Command Set Extension
- Search Query Extension
- Form Customizer
4.4 Concepts & Scenarios
- Tenant-Wide Deployment
- Pre-Allocated Placeholders
5. Library Components
- Overview
- Library Component Tutorial
6. Publishing to Marketplace
- Overview
- App Validation Checklist
- After Publishing Your App
- Frequently Asked Questions
7. Connecting to APIs
- Connect to SharePoint APIs
- Connect to Microsoft Graph
- Connect to APIs Secured with Azure AD
- Working with the AADTokenProvider
- Connect to Anonymous APIs
- Subscribe to List Notifications
8. Setup & Deployments
- Package Solutions
- Update Packages
- Enable the Microsoft 365 CDN
- Deploy Web Parts to Azure CDN
- Deployment Options for SPFx Solutions & Microsoft Teams
- Custom Build Tasks
- Extend Webpack
- Tenant-Scoped Solution Deployment
- Optimize Builds for Production
9. Tools & Libraries
- Overview
- Toolchain
- Yeoman Generator for the SharePoint Framework
- Configure SASS Processing During Builds
- Microsoft Graph Toolkit
10. Debugging
- Debug in Visual Studio Code
- Debug on Modern Pages
- Use the Developer Dashboard
- Maintenance Mode for Client-Side Web Parts
Tags:
SPFx