Introduction to the SharePoint Framework (SPFx). We cover the SharePoint Framework overview, setting up a development environment, building hello world web parts and running them in the SharePoint workbench.
You can see videos around this module:
- Getting Started with the SharePoint Framework
- SharePoint Framework Tools
- SharePoint Client-side Components
- Setup your Development Environment
- Setup your Office 365 Tenant
- Full support for client-side SharePoint development.
- Support for open source tooling.
- You can use any client side framework.
- Use SharePoint Workbench to quickly preview and test web parts.
In these labs, you will walk through an introduction of the SharePoint Framework, setting up a development environment, building hello world web parts with different web frameworks and getting them up and running within the SharePoint workbench.
- Exercise 1: Create a hello world web part without any framework
- Exercise 2: Create a hello world web part with the React framework
- Exercise 3: Create a hello world web part in Angular 1.x
- Exercise 4: Create a hello world web part in Knockout
- Exercise 5: Create a hello world web part with jQuery
The completed lab exercises are the demos for this module.
- [Exercise 1: Create a hello world web part without any framework](./Demos/Exercise 1/helloworld-webpart)
- [Exercise 2: Create a hello world web part with the React framework](./Demos/Exercise 2/helloworld-webpart-react)
- [Exercise 3: Create a hello world web part in Angular 1.x](./Demos/Exercise 3/helloworld-webpart-angular1)
- [Exercise 4: Create a hello world web part in Knockout](./Demos/Exercise 4/helloworld-webpart-knockout)
- [Exercise 5: Create a hello world web part with jQuery](./Demos/Exercise 5/helloworld-webpart-jquery)
| Roles | Author(s) |
|---|---|
| Project Lead / Architect / Lab Manuals / Videos | Todd Baginski (Microsoft MVP, Canviz) @tbag |
| PM / Dev Lead | Alex Chen (Canviz) @alexchx |
| Lab Manuals / Source Code | Luis Lu (Canviz) @stluislu |
| Lab Manuals / Source Code | Theodore Shi (Canviz) @TheodoreShi |
| Lab Manuals / Source Code | Max Liu (Canviz) @maxliu0621 |
| Testing | Cindy Yan (Canviz) @CindyYan |
| Testing | Melody She (Canviz) @melodyshe |
| Testing | Lucas Smith (Canviz) @lucas66 |
| PM | John Trivedi (Canviz) @johnt83 |
| Sponsor / Support | Vesa Juvonen (Microsoft) @VesaJuvonen |
| Sponsor / Support | Chakkaradeep Chandran (Microsoft) @chakkaradeep |
| Sponsor / Support | Mike Ammerlaan (Microsoft) @mammerla |
| Sponsor / Support | Rob Howard (Microsoft) @robmhoward |
| Version | Date | Comments |
|---|---|---|
| 1.0 | November 18, 2016 | Initial release |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Notice that we will keep on updating this material based on your input and work being done in the Office 365 Developer Patterns and Practices program. You can provide us input directly using the Office 365 Developer Patterns & Practices Yammer group