SPUnite17 Getting up to Speed with React

ElioStruyfTrainer@U2U– MVPOctober25th,2017

GettinguptospeedwithReact

#SPUnite17- @eliostruyf

Abriefmomenttothepast


DOMManipulation

HTML JavaScript


Databinding

HTML JavaScript

var app = angular.module('feedbackApp', []);app.controller('feedbackController', ['$scope', '$http', ($scope, $http) => {

$scope.oneAtATime = true;

$http.get('tracks.json?ver=0.1').success(data => {$scope.tracks = data;

});}]

);

<body data-ng-app="feedbackApp" data-ng-controller="feedbackController"><ul id="tracks"> <li data-ng-repeat="track in tracks" class="track"><h2>{{track.title}}</h2><ul class="trackSessions"><li data-ng-repeat="session in track.sessions"

class="session"><div class="sessionDetails"><a data-ng-href="{{session.url}}">{{session.title}}</a><span ng-if="session.speaker">by {{session.speaker}}

({{session.start}} - {{session.end}})</span><span class="note" ng-

if="session.note">{{session.note}}</span></div>

</li></ul>

</li></ul>

</body>


ReactisaJavaScriptlibraryforbuildinguserinterfaces


Components


Componentbased


Reactdoesnotseparatecomponenttemplates


YouwriteHTMLinTypeScript


JSXandTSX

AddsXMLsyntaxtoJavaScript/TypeScript

<a href="https://www.eliostruyf.com" title="Elio Struyf">My blog</a>

React.createElement("a", { href: "https://www.eliostruyf.com", title: "Elio Struyf" }, "My blog")

JSX

PlainJavaScript


VariablesinJSX/TSX

<a href={blogLink.url} title={blogLink.title}>{blogLink.text}</a>

React.createElement("a", { href: blogLink.url, title: blogLink.title }, blogLink.text)

PlainJavaScript

JSX


Simplecomponent

class ComponentName extends React.Component<{}, {}> {public render() {

return (<div>

Component name should start with a capital letter</div>

);}

}


Usingthecomponentcomponent

<ComponentName />


Events


Usingthecomponentcomponent

class Sample extends React.Component<{}, {}> {private _linkClick() {console.log('Hey, you clicked me!');

}

public render(): React.ReactElement<{}> {return (<a href="javascript:;" onClick={this._linkClick}>Click me!</a>

);}

}


Howdoweconvertthis?


Youdon’thavetoworryaboutit.InSPFx everythingisalreadyinplace.


JSXlimitations


SomekeywordsarereservedinJS/TS

• classà className• colspanà colSpan• innerHTMLà dangerouslySetInnerHTML• forà htmlFor• styleà style(itisanobject!)


Demo:Component


Inputs(props)andstate


Inputpropertiesorprops

• Passinginformationtoyourcomponent• Donotupdatepropertiesinyourcomponent• Usedforrenderingorcalculations

<div>Description: {this.props.description}

</div>


Passingpropstocomponents

<ComponentName description="This is the description" />


Componentstateorstate

• Keepholdofthecurrentcomponentsvariables• Consideredprivatetothecomponent

constructor(props: IProps) {super(props);

// initialize the statethis.state = {

show: false};

}


Updatethecomponentstate

• UpdatestatebyusingsetState• Thinkofitasarequest ratherthananimmediatecommand• Forbetterperformance,Reactmaydelayit

this.setState((prevState, props) => {return {

show: !prevState.show};

});


Demo:Workingwith

propsandstates


Listingitems


Importantthingswhenlistingitems

• Alwaysuseakey• Trytoavoidusingthenitemindex

public render() {const itemList = [{ id: 0, title: "Hello" }, { id: 2, title: "," },

{ id: 4, title: "World" }];return (<ul> {itemList.map(item => {return <li key={item.id}>{item.title}</li>;

}) }</ul>

);}


VirtualDOM


VirtualDOMandchangedetectionTherealDOMVirtualDOM


Demo:Listingitems


Lifecyclehooks


Lifecyclehooks

• Mounting:• constructor,componentWillMount,componentDidMount

• Updating:• componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,componentDidUpdate

• Unmounting• componentWillUnmount


CallingAPIsandstoringdata


Wheretocallfordata

• Donotdoasync callintheconstructor• UsethecomponentDidMount lifecyclehook

public componentDidMount(): void {this._getAsyncData().then(items => {

if (items) {this.setState({

items});

}});

}


Demo:Retrievingasync data


WorkingwithSCSSinSPFx


Demo:Stylingyourcomponent

Questions?

Office Servers & Services MVPAzure / Office 365 / SharePoint

@[email protected]

ElioStruyfLead trainer and architect


SPUnite17 Getting up to Speed with React

Technology