Downloaded 32 times
Uploaded byEric Overfield
Supercharge Your SharePoint Framework Webpart with React
This document discusses how to use React with SharePoint Framework (SPFx) web parts. It begins with an overview of React, explaining that it is a JavaScript library for building user interfaces. It then covers how React can be combined with SPFx by importing React and ReactDOM in the web part code. The document demonstrates creating a basic React component in an SPFx web part, and also shows more advanced examples like multi-page React web parts and extending the property pane with React. Resources for learning more about React and React with SPFx are provided.
More Related Content
Similar to Supercharge Your SharePoint Framework Webpart with React
![[Patel] SPFx: An ISV Insight into latest Microsoft's customization model](https://cdn.slidesharecdn.com/ss_thumbnails/ecs18shaipatelspfxanisvinsight-180618091115-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Supercharge Your SharePoint Framework Webpart 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 amodern 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 toReact 2. Combine React with SPFx 3. Extend SPFx webparts with React OVERVIEW
- 5. What is React? AFramework, 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 Reactwork 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 BUILDINGBLOCKS
- 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 BuildingBlock - 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.
- 14. @ericoverfieldericoverfield.com React SPFx Webpartfolder 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 willuse 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 REACTENABLED SPFx WEBPART
- 19. A MORE COMPLEXREACT SPFx WEBPART Demo
- 20.
- 21. EXTENDING SPFx WEBPART PROPERTYPANE WITH REACT Demo
- 22. REVIEW 1. Introduction toReact 2. Combine React with SPFx 3. Extend SPFx webparts with React
- 23.
- 24. RESOURCES • Official ReactHomepage 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 YOURSHAREPOINT FRAMEWORK WEBPART WITH REACT
Editor's Notes
- #2 Slides will be available from blog and twitter Extend the basic ootb SPFx webpart by including React. Look at what React is, out it is put together, how to use it within SPFx DEMO HEAVY
- #7 Declarative – describing what to do to date, leaving the implementation up to library One way data flow -> dispatcher -> store -> view Action takes from view back to dispatcher
- #10 https://www.slideshare.net/JimitShah39/reactjs-the-dawn-of-virtual-dom
- #13 https://facebook.github.io/react/docs/jsx-in-depth.html JavaScript XML made popular by React JSX to write React views JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. http://buildwithreact.com/tutorial/jsx TypeScript also uses JSX as well, that is where we get the .tsx extension from
- #15 Webpart includes “components” folder that contains the React Views, Sass and View state property interfaces Sass is tied to the React Views
- #19 simple react, then tear apart and add more functionality https://github.com/giuleon/spfxWeather/
- #20 https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-todo-basic
- #21 https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-multipage Waldek Mastykarz (MVP, Rencore, @waldekm)
- #22 https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-custompropertypanecontrols