The document outlines advancements in the SharePoint Framework (SPFx) including new features in versions 1.6 and 1.7, such as support for connections to Azure Active Directory and Microsoft Graph, tenant-wide deployment of extensions, and dynamic data capabilities. It introduces React as a component-based JavaScript library for building user interfaces, emphasizing its lifecycle and state management. Additionally, it highlights Office Fabric UI as a framework for creating responsive user experiences and mentions various reusable React controls available for SPFx solutions.

1. Gaining SPFx Super Abilities with
React, Office Fabric UI and SPFx
Controls
David Opdendries

2. WHO AM I
•David Opdendries
•David@zalosolutions.co
m
•@SharePointDavid

3. https://github.com/spdavid/SPSVIE
Demo Code can be found at

4. What’s New and comming

5. SPFx 1.6
• Connect to secured AAD protected resources using AADHttpClient
• Connect to the graph using MSGraphClient
• Tenant Wide Deployment of extensions
• sp-dialog Updates

6. SPFx 1.7
• React 16
• Domain-isolated Web Parts
• Dynamic Data (GA)
• List Subscriptions (socket.io)
• SPFx Components in Teams
• Provider Hosted Solutions
• Application Pages (similar to on-prem application pages)
• Support for SharePoint 2019 in October

7. SPFx RoadMap
• More Placeholders
• Content Header
• Content Footer
• Navigation
• Search
• "Citizen developer" model for lightweight development
• Better Approval Experience
• Workbench 2.0 (Will work with extensions)
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/roadmap

8. React

9. What is React
• A JavaScript library for building user interfaces
• Component Based
• Declarative
• User Interface Library
• Created By FaceBook

10. A Component lifecycle
• First Render
• Constructor
• Render
• ComponentDidMount
• OtherEvents
• ShouldComponentUpdate
• ComponentDidUpdate
• componentWillReceiveProps

11. React Has State
• When the state Changes the render re-renders the component
• React does a shadow compare. If the html is the same it will not re-
render anything.

12. Binding
• This is not always this. Example is when you do a click event from a
button. This = button and not the component
• Below is two ways to get around this problem

13. Fabric UI

14. Office Fabric UI
• The official front-end framework for building experiences that fit
seamlessly into Office and Office 365 build with React
• Styles
• Responsive Framework
• Typography
• Animations
• Icons
• More
• Components
• Basic Inputs
• Navigation
• Content
• Pickers
• Progress & Validation
• More
https://developer.microsoft.com/en-us/fabric

15. Demo

16. Reusable React controls that can be used in
SharePoint Framework (SPFx) solutions
https://sharepoint.github.io/sp-dev-fx-controls-react/

17. FileTypeIcon

18. Placeholder control

19. SecurityTrimmedControl
Show content to people who have the permissions

20. TaxonomyPicker

21. People Picker

22. Other PnP SPFx Controls
•List Picker
•List View
•WebPartTitle
•IFrameDialog

23. Theres More – PnP SPFx Property Controls
• CodeEditor (Edit html code)
• CollectionData
• ColorPicker
• TimePicker
• ListPicker
• MultiSelect
• Number
• Order
• PeoplePicker
• SpinButton
• SwatchColorPicker
• TermPicker
• Callouts
https://sharepoint.github.io/sp-dev-fx-property-controls/

24. DEMO

26. @SharePointDavid
david@zalosolutions.com