SPUnite17 Getting up to Speed with React
-
Upload
nccomms -
Category
Technology
-
view
42 -
download
5
Transcript of SPUnite17 Getting up to Speed with React
#SPUnite17- @eliostruyf
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>
#SPUnite17- @eliostruyf
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
#SPUnite17- @eliostruyf
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
#SPUnite17- @eliostruyf
Simplecomponent
class ComponentName extends React.Component<{}, {}> {public render() {
return (<div>
Component name should start with a capital letter</div>
);}
}
#SPUnite17- @eliostruyf
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>
);}
}
#SPUnite17- @eliostruyf
SomekeywordsarereservedinJS/TS
• classà className• colspanà colSpan• innerHTMLà dangerouslySetInnerHTML• forà htmlFor• styleà style(itisanobject!)
#SPUnite17- @eliostruyf
Inputpropertiesorprops
• Passinginformationtoyourcomponent• Donotupdatepropertiesinyourcomponent• Usedforrenderingorcalculations
<div>Description: {this.props.description}
</div>
#SPUnite17- @eliostruyf
Passingpropstocomponents
<ComponentName description="This is the description" />
#SPUnite17- @eliostruyf
Componentstateorstate
• Keepholdofthecurrentcomponentsvariables• Consideredprivatetothecomponent
constructor(props: IProps) {super(props);
// initialize the statethis.state = {
show: false};
}
#SPUnite17- @eliostruyf
Updatethecomponentstate
• UpdatestatebyusingsetState• Thinkofitasarequest ratherthananimmediatecommand• Forbetterperformance,Reactmaydelayit
this.setState((prevState, props) => {return {
show: !prevState.show};
});
#SPUnite17- @eliostruyf
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>
);}
#SPUnite17- @eliostruyf
Lifecyclehooks
• Mounting:• constructor,componentWillMount,componentDidMount
• Updating:• componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,componentDidUpdate
• Unmounting• componentWillUnmount
#SPUnite17- @eliostruyf
Wheretocallfordata
• Donotdoasync callintheconstructor• UsethecomponentDidMount lifecyclehook
public componentDidMount(): void {this._getAsyncData().then(items => {
if (items) {this.setState({
items});
}});
}
Office Servers & Services MVPAzure / Office 365 / SharePoint
ElioStruyfLead trainer and architect