SharePoint Framework SPFx from Zero to Hero | Get Hired

Explore SPFx, the SharePoint framework, as a framework-agnostic, client-side rendering model that integrates with SharePoint data, extends Microsoft Teams, and supports REST APIs across SharePoint Online and on-premises.

Explore the SPFx tool chain for building and testing SharePoint framework apps, including npm, node_modules, TypeScript transpilation to JavaScript, Yeoman generators, Gulp tasks, and the SharePoint workbench for local testing.

Install and verify Node.js version 12, install gulp and yeoman globally, and install the generator-sharepoint to prepare the SPFx development environment.

Create and test your first SPFx project by configuring a SharePoint Online solution with no JavaScript framework, then run serve to preview Hello world web part on localhost in Chrome.

Install Visual Studio Code by downloading from the official site, selecting your operating system, running the installer, and accepting the agreement, then complete the installation and choose a dark theme.

Learn to create a new SharePoint app catalog in Office 365 by navigating to the apps section and choosing the fast, automatic catalog creation option in under a minute.

Create a site collection using the SharePoint page or the admin center, name the site, verify availability, set description and language, adjust privacy to public, then finish.

Compare SharePoint Online plans and storage options, then learn to create an app catalog and start developing with SharePoint framework in a ready development environment.

Explore TypeScript as a typed superset of JavaScript with classes, interfaces, and types, and see how it underpins Angular development and component logic in SPFx projects.

Explore basic type concepts in TypeScript, including numbers, strings, booleans, any, arrays, undefined values, and an array of a person type with name fields and enrollment status.

Explore TypeScript operators by applying arithmetic, assignment, relational, logical, and conditional operators to numbers, demonstrate modulus for even/odd checks, and compare expressions.

Discover how to define variables in TypeScript using var with identifiers, types, and values in single-line and multi-line forms. Practice declaring number types and assignments with clear examples.

Explore TypeScript types by defining variables with var and let, using number, boolean, string, any, and arrays (including two-dimensional arrays), then print with console.log and discuss if/else conditions.

Explore TypeScript functions by learning how to define and call them, and manage parameters, including optional and default values, for readable, maintainable, reusable code.

Explore TypeScript built-in methods for arrays and strings, including includes, length, slice, and charAt. Learn practical use cases for indexing, validation, and substring extraction.

Explore how TypeScript arrays are defined and typed, zero-based indexing, undefined for out-of-bounds, and how to concatenate, push, pop, and reverse elements.

Explore how a TypeScript interface declares members and requires full implementation in a class, with an example using a person's first name, last name, and a say hi function.

Explore the SharePoint Framework web part structure, from the entry point in the source folder to rendering a Hello World web part with TypeScript classes and the base client side.

Explore the SPFx project structure in Visual Studio Code, focusing on the configuration folder, entry points, localization settings, CDN deployment options, and local testing before production.

Learn to build multiple client-side web parts with the SharePoint Framework (SPFx) using Yeoman generators, no JavaScript framework, and manage visuals with Visual Studio Code and localhost debugging.

Bundle and package SPFx solution with gulp bundle --ship and gulp package-solution --ship, deploy to SharePoint Online app catalog, then add ESP effects web part to a page.

Configure web part properties in the SharePoint framework to render dynamic site data, including site language, user display name, and absolute URL, by updating the renderer and accessing web properties.

Learn to configure a SharePoint Framework web part property pane by adding text, multi-line, checkbox, dropdown, and toggle controls, wiring them to the web part and manifest, and preserving defaults.

Connect your SharePoint Framework web part to a SharePoint Online site and read data using the web part render method, context, and web title from the site object model.

Define a SharePoint list with a mock list and ISP interface, implement a mock hdb client promise to fetch data, and render styled items in a web part.

Learn to retrieve and render lists from SharePoint Online with SPFx, by importing the client, querying web/lists, filtering hidden lists, and handling local versus SharePoint environments.

Package the SPFx solution, upload to the app catalog, and add the web part to a SharePoint site, while handling localhost assets during deployment.

Deploy your web parts to SharePoint on Microsoft 365 by packaging a client-side solution, uploading it to the app catalog, and adding the deployed web part to a demo site.

Learn to integrate a jQuery UI accordion into a SharePoint framework webpart, including project setup, npm installation, configuring externals for jQuery and jQuery UI, and rendering the accordion in SPFx.

Learn how the SharePoint Framework web part property pane controls a description field and updates the web part in real time via getPropertyConfiguration and localization files in English US.

Update the SPFx web part property pane by editing the manifest and JSON to read defaults and prototype fields like course name, code, and description in Visual Studio Code.

Add a slider to the web part property pane to collect a course rating from 1 to 5, bind it to a rating property, and refresh the report.

Learn to build custom controls in the SharePoint framework using SPFx, scaffolding with Yeoman, and creating a list items web part with React and a property pane.

Build a custom SPFx property pane dropdown by defining the props interfaces, loading mock options with a two-second delay, and updating the selected key on change.

Fetch SharePoint list titles from a SharePoint Online site via the SPFx REST API using SPHttpClient to query web/lists. Render the titles with simple HTML in a workbench test.

Create a SharePoint list using SPFx REST API by building a web part, providing the list name, and posting the new list to SharePoint.

Create a SharePoint subsite with the SPFx REST API by building a web part, configuring title, URL, and description, and deploying via the site context.

Create a SharePoint Framework web part that performs CRUD to insert list items, using a form for first name, last name, and department.

Add an employee id column to the EmpList in SPFx, update the header and form with a number input, and verify item insertion after saving.

Build a SPFx CRUD feature to fetch a SharePoint list item by id and populate an IEmployee interface with title, first name, last name, department, and employee ID.

Demonstrates building a SPFx solution using the PnP library to perform insert operations into a SharePoint Online list named students, with fields for student id, name, department, and city.

Explore the PnP read method to fetch a student by ID from a SharePoint list and populate a details table with student name and city when clicking get details.

Modify the SharePoint list by adding a student ID column, adjust data mappings and patterns, and test the app to reflect updated title, department, and city fields.

Implement and test the update operation for a student record in a SharePoint list using the pnp update crud operation, handling id retrieval, value mapping, and success feedback.

Implement the delete step in a SPFx CRUD workflow by wiring a delete button, fetching the student id, deleting the item from the SharePoint list, and showing a success alert.

Explore how to create an SPFx extension using the application customizer, set up a Yeoman project for SharePoint Online, and test it by loading the debug script.

Build an SPFx extensions field customizer to render a modified view for a SharePoint list field, using a demo students grades list to configure and test.

Solve a SharePoint Framework SPFx challenge by building a grades visualization with ESP effects extension and customizer, rendering green and red areas based on score, using dom events and styles.