Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Supercharge Your SharePoint Framework Webpart with React

656 views

Published on

Time to improve upon the SharePoint Framework with React

Published in: Technology
  • Be the first to comment

Supercharge Your SharePoint Framework Webpart with React

  1. 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. 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. 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. 4. 1. Introduction to React 2. Combine React with SPFx 3. Extend SPFx webparts with React OVERVIEW
  5. 5. What is React? A Framework, a Library, Just a Verb?
  6. 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. 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. 8. PRIMARY REACT BUILDING BLOCKS
  9. 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. 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. 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. 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. 13. REACT AND SPFx
  14. 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. 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. 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. 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. 18. Demo CREATE A REACT ENABLED SPFx WEBPART
  19. 19. A MORE COMPLEX REACT SPFx WEBPART Demo
  20. 20. MULTI-PAGE REACT WEBPART Demo
  21. 21. EXTENDING SPFx WEBPART PROPERTY PANE WITH REACT Demo
  22. 22. REVIEW 1. Introduction to React 2. Combine React with SPFx 3. Extend SPFx webparts with React
  23. 23. RESOURCES
  24. 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. 25. THANK YOU SUPERCHARGE YOUR SHAREPOINT FRAMEWORK WEBPART WITH REACT

×