This document summarizes a presentation about the SharePoint Framework, React, and mindfulness. It introduces SharePoint Framework for building customizations like web parts and extensions. It discusses using React components in SharePoint Framework and demonstrates some examples. It also introduces mindfulness and how React components work declaratively using JSX and props/state. Finally, it recommends some ready-made Office UI Fabric and PnP controls that can be used to build user interfaces.
3. Olli Jääskeläinen
Architect at Sulava
Microsoft MVP, MCM, MCT
An organizer for
Office 365 & SharePoint User Group
Finland
SharePoint Saturday Helsinki
A novice at mindfulness
Bouldering, writing code, trying out the
very boring acts of meditation
4. ”Can you guys at least
pretend this is
dangerous?”
Photo credit: @katjajokisalo – Check her Microsoft 365 blog at katjajokisalo.com
5. Flow of the session
Introduction to
SharePoint
Framework
React and React
components in
SharePoint
Framework
Available ready-
made controls
+ a few bits about mindfulness
7. SharePoint Framework in a
nutshell
Modern way to create user interfaces
Builds on open-source development
tools
You can use React and other
JavaScript frameworks and libraries
8. SharePoint Framework building
blocks
SharePoint Web Part / Teams Tab
SPFx for Teams personal app and mobile app
support (SPFx 1.10)
SharePoint Extensions
Header, footer, custom button on a list,
field customizer
Single part app pages in SharePoint
What’s coming
SPFx for Office (SPFx 1.10 developer preview)
Extending beyond SharePoint – “M365
Framework?”
14. Declarative nature of React
JSX
XML/HTML like syntax used by
React
Extends the script so that code
and HTML can co-exist
TSX
TypeScript equivalent of JSX
16. Props and State in React
Properties are constant parameters
given to React component
State contains variables that present the
current state of React component
When the data is loaded
When the user interacts
The component re-renders when state
changes
17. Props and State in React
Definition
of props
Definition
of state
State can
only be
directly set
in
constructor
State
change is
initiated via
setState
State
values can
be
referenced
18. Class components vs. functional
components
Class components is the
traditional way to create complex
stateful components
Functional components are simple
Since React 16.8 Hooks
update functional components
can be stateful
19. Functional React is simple BUT…
Rules of Hooks! https://reactjs.org/docs/hooks-rules.html
Only call Hooks at Top Level
Don’t call Hooks inside loops, conditions, or nested functions.
React relies on the order in which the hooks are called!
Only call Hooks from React functions
Not from regular JavaScript functions
But I need to fetch data, how can I set the state?
https://www.robinwieruch.de/react-hooks-fetch-data
https://www.npmjs.com/package/use-async-effect
23. Office UI Fabric React
Builds on Office UI Fabric
controls making them React
components
Essential components for
Office 365 development
Use them to make your solutions
fit to the suite
https://github.com/OfficeDev/office-ui-fabric-react
24. Demo
Using Office UI Fabric React components
Icons: https://uifabricicons.azurewebsites.net/
26. PnP SharePoint Framework Property
Controls
Code Editor
Collection Data
Color Picker
Datetime Picker
Term Picker
People Picker
List Picker
Multiselect
Number
Order
…
https://sharepoint.github.io/sp-dev-fx-property-controls/#getting-started
28. How to practice mindfulness?
Read/listen/watch mindfulness stuff
Find a way that suits you
Meditation (learning how to keep focus)
Sports (yoga, bouldering, ice hockey,
running)
29. Key takeaways
SPFx is the most powerful way to customize modern SharePoint
SPFx is extending beyond SP
React is used by SharePoint and Office 365 – why should not you use it as
well?
Build on Office UI Fabric and PnP components and controls
Be mindful – aware of what you are doing and acceptive towards yourself
and others
https://opax.sharepoint.com/sites/HappyDeveloper
Web part, web part properties
Extension
https://teams.microsoft.com/_#/tab::0cb2943d-e348-4bed-b334-da42f341d15b/General?threadId=19:5e324d50f9504e2d85c9dffd7a3e5ea2@thread.skype&ctx=channel
Team information
Frame source
Living in the moment – right now.
Being aware of your inner state and the world.
Being acceptive towards others and yourself.