Codemobiles React - iOS, Android, Angular, React, Vue.JS ...
Making share point rock with angular and react
-
Upload
joseph-jorden -
Category
Technology
-
view
60 -
download
0
Transcript of Making share point rock with angular and react
![Page 1: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/1.jpg)
Making SharePoint Rock With Angular and ReactJOE JORDENSENIOR CONSULTANT, NEUDESIC@COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM
![Page 2: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/2.jpg)
Why Are We Here?
Learn to use a custom master page Learn to incorporate Angular pages into SharePoint Learn to incorporate React pages in SharePoint Learn to link Angular and React using ngReact
![Page 3: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/3.jpg)
Crafting a Master Page
Create a custom master page to Control look and feel (and possibly smell) Add libraries Instantiate framework Can do last two without a custom master
![Page 4: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/4.jpg)
Using Material Design
Use Material Design to make things pretty https://material.angularjs.org/latest/
![Page 5: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/5.jpg)
Angular 1.5 Overview
Directives Use to manipulate the DOM
Controllers Use to set up or enhance the scope object
Services Use to share data between controllers These are singletons
Uses watchers for two-way binding
![Page 6: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/6.jpg)
Demo - Create a Site With Angular 1.5
Client list in SharePoint – Angular 1.5 style Add modules to project
Set GhostableInLibrary to true in elements file
![Page 7: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/7.jpg)
React/FLUX Overview
Updates UI using virtual DOM diffing No two-way binding Uses one-way binding, more like circular binding (FLUX)
![Page 8: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/8.jpg)
React/FLUX Overview
View => Dispatcher => Store
![Page 9: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/9.jpg)
React/FLUX Overview
Use React.MSBuild Install-Package React.MSBuild –Pre Automatically creates xxx.generated.js file
![Page 10: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/10.jpg)
Demo - Create a Site With React
Client list in SharePoint – React style
![Page 11: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/11.jpg)
Code to Add and Get Items
SharePoint REST code can be tricky Need to get
Request Digest Item type eTag (for updating)
Angular Use injector
React Hope for the best
![Page 12: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/12.jpg)
Linking React and Angular With ngReact
ngReact allows us to use React components in Angular sites Add react angular module dependency
angular.module('app', ['react']); react-component: an Angular directive that delegates off to a React
Component* reactDirective: a service for converting React components into the react-
component Angular directive*
* https://github.com/ngReact/ngReact
![Page 13: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/13.jpg)
Demo – Using ngReact
Client list in SharePoint – ngReact style
![Page 14: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/14.jpg)
Summary
Angular is awesome, except with large lists React is awesome, but a bit verbose ngReact is perfect for linking the two together for double-awesomeness A custom master will give you the precise design you are after
![Page 15: Making share point rock with angular and react](https://reader035.fdocuments.us/reader035/viewer/2022070515/587784d31a28abc85f8b62f3/html5/thumbnails/15.jpg)
References
Code: https://github.com/CobaltCoder/CodeCamp2016 SlideShare: http://www.slideshare.net/CobaltCoder/making-share-point-rock-with-angular-and-react Blog: http://www.cobaltcoder.com