GITHUB https://github.com/spdavid/SPSVIE Gaining SPFx Super Abilities with React and Office UI Fabric Want to create really good looking web parts and do it fast? Microsoft has given us an official front-end framework to build great experiences in office 365. Currently the best way to apply this framework is with React. React is a simple and powerful JavaScript framework. Combine that with the Office UI Fabric and you can make good looking, mobile friendly web parts with ease. Join me and I will show you how react works and how to use the Office UI Fabric and make awesome looking web parts.

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