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.

1. The happy developer:
SharePoint Framework,
React, and Mindfulness
Olli Jääskeläinen
SPS Bremen 2020

2. THANK YOU, SPONSORS!
SHAREPOINT SATURDAY BREMEN 2020
#spsbre

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

6. Introduction to SharePoint
Framework
Why this stuff is
important?

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?”

9. Demo
SharePoint Framework customizations

10. What is mindfulness?
Living the moment
Being aware
Being acceptive

11. React
Mix JavaScript and XML?

12. The easy way
out

13. What is React?
Declarative
Component based  Reusable
Stateful

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

15. Demo
TSX in React components

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

20. Demo
Class component vs. functional component

21. Ready-made controls and
components
Don’t reinvent
the wheel

22. Office UI Fabric React

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/

25. PnP SharePoint Framework Property
Controls
Elio <3

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

27. Demo
PnP SharePoint Framework Property Controls

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

30. THANK YOU, SPONSORS!
SHAREPOINT SATURDAY BREMEN 2020
#spsbre