Time to improve upon the SharePoint Framework with React

1. ERIC OVERFIELD | PixelMill
Microsoft MVP & RD
SharePoint Advocate & Enthusiast
@ericoverfield
SUPERCHARGE YOUR SHAREPOINT
FRAMEWORK WEBPART WITH
REACT
http://pxml.ly/EO-SPFx-React

2. ERIC OVERFIELD
President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Microsoft Regional Director
Published SharePoint Author
SharePoint Community Organizer & Contributor @ericoverfield
ericoverfield.com

3. PixelMill is a modern SharePoint Design Agency based in Northern California. On the forefront of
web design trends since 1998, PixelMill provides innovative collaboration portals to enhance the
user adoption of SharePoint intranets, extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com

4. 1. Introduction to React
2. Combine React with SPFx
3. Extend SPFx webparts with React
OVERVIEW

5. What is React?
A Framework, a Library, Just a Verb?

6. @ericoverfieldericoverfield.com
What is React?
• An open-source JavaScript library for creating web based user interfaces
• Created and maintained by Facebook
• Fast, declarative views, component based
• Often compared to AngularJS
• AngularJS is a framework, containing a model-view-controller
• React is a library – not as many features, not a full framework
• React has a View, but lacks Model and Controller components
• One way data flow
• Flux (Architecture): Dispatcher->Store->View->Action (back to Dispatcher)
REACT OVERVIEW

7. @ericoverfieldericoverfield.com
Why might React work well with SPFx?
• React is considered super-fast
• Use of “Virtual DOM”
• React only changes what has changed
• i.e. only one item in a list instead of the entire list
• A full featured framework such as AngularJS might be overkill
• SPFx provides own “model” and “controller” features, UI aspect can be more simple
• With less moving parts, many find easier to learn
• React considered by many easier to debug as only providing View
REACT AND SPFx
+

8. PRIMARY REACT BUILDING BLOCKS

9. @ericoverfieldericoverfield.com
React core – a Virtual DOM – “React DOM”
• An abstraction of the real DOM – an abstraction of an abstraction
• Real DOM tied to rendering, thus slow on updates
• React DOM used for quick diffs, control of state change
REACT DOM - VIRTUAL DOM

10. @ericoverfieldericoverfield.com
Base Component Building Block - ReactElement
• A stateless, plain object describing what we want to render in a browser
• Need to provide at least a type of element, tied to a rendering function
• “props” allow for the passing of properties
• var reactElement = React.createElement(type, props, children);
REACTELEMENT

11. @ericoverfieldericoverfield.com
Stateful React Elements -> ReactComponent
• Very similar to a ReactElement but has “state”
• “setState” used to update state of component
• Upon update of state, React will auto-rerender just what changed
• Based on class, React.component, that accepts properties and state, that we
extend
REACTCOMPENENT

12. @ericoverfieldericoverfield.com
JavaScript XML (.jsx) – Syntatic language for rendering templates
• Use JSX to write React Views
• Adapted by TypeScript as well (.tsx) to allow for similar coding
• Not required by React, but makes life easier
• JSX gets transpiled to JavaScript
JSX - JAVASCRIPT XML

13. REACT AND SPFx

14. @ericoverfieldericoverfield.com
React SPFx Webpart folder structure – Similar as a no-framework webpart
• src: primary webpart TypeScript source code
• src/webparts/”yourwebpart”/components: .tsx / React Components
• config: json configuration files for build process
• typings: TypeScript typings for JS libs – legacy
• lib: Build files (TS compiled JS) ready for bundle
• dist: Final web ready code for distribution
• sharepoint: .spapp file for App Catalog
• node_modules: NodeJS modules (JS) for toolchain
REACT SPFx WEBPART PROJECT
STRUCTURE

15. @ericoverfieldericoverfield.com
React and SPFx
• Normally somewhat complex to include React into project
• react and react-dom needed, then create scaffolding, SPFx makes much more simple
• With SPFx, need to import react and react-dom where webpart defined
• import * as React from 'react';
• import * as ReactDom from 'react-dom';
• In Webpart render() function, create React Element, and render
UTILIZE REACT IN SPFx WEBPARTS

16. @ericoverfieldericoverfield.com
Office UI Fabric
• A framework for building custom Office 365 / SharePoint front-end experiences
• Open source: https://github.com/OfficeDev/office-ui-fabric-core
• https://dev.office.com/fabric
• Primary pillars
• Core: Styles / CSS
• JavaScript: Interactions
• React: UI integration
• AngularJS: open source project
• SPFx pre-integrated with React
OFFICE UI FABRIC REACT AND SPFx

17. @ericoverfieldericoverfield.com
Why you will use Office UI Fabric
• Consistency of interface with custom components
• SharePoint Framework has UI Fabric built in
• Allows developers to focus on functionality, not the look
• Speed up the development cycle
WHY OFFICE UI FABRIC

18. Demo
CREATE A REACT ENABLED
SPFx WEBPART

19. A MORE COMPLEX REACT
SPFx WEBPART
Demo

20. MULTI-PAGE REACT WEBPART
Demo

21. EXTENDING SPFx WEBPART
PROPERTY PANE WITH REACT
Demo

22. REVIEW
1. Introduction to React
2. Combine React with SPFx
3. Extend SPFx webparts with React

23. RESOURCES

24. RESOURCES
• Official React Homepage
https://facebook.github.io/react/
• Office UI Fabric React
https://dev.office.com/fabric#/components
• GitHub: Office UI Fabric React
https://github.com/OfficeDev/office-ui-fabric-react
• Office UI Fabric React in a SPFx Webpart
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components
• SPFx Fantastic 40 Web Parts
https://github.com/OlivierCC/spfx-40-fantastics
• Even more sample React SPFx Web Parts
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples
• React Custom Property Pane Control
https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/build-custom-property-pane-controls
• Presentation Source code
https://github.com/eoverfield/SPFx-Demos/tree/master/React-WebPart-Demos

25. THANK YOU
SUPERCHARGE YOUR SHAREPOINT
FRAMEWORK WEBPART WITH
REACT