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.

SPUnite17 Getting up to Speed with React

SharePoint Unite 2017 Session

  • Login to see the comments

  • Be the first to like this

SPUnite17 Getting up to Speed with React

  1. 1. Elio Struyf Trainer @ U2U – MVP October 25th, 2017 Getting up to speed with React
  2. 2. #SPUnite17 - @eliostruyf A brief moment to the past
  3. 3. #SPUnite17 - @eliostruyf DOM Manipulation HTML JavaScript
  4. 4. #SPUnite17 - @eliostruyf Data binding 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>
  5. 5. #SPUnite17 - @eliostruyf React is a JavaScript library for building user interfaces
  6. 6. #SPUnite17 - @eliostruyf Components
  7. 7. #SPUnite17 - @eliostruyf Component based
  8. 8. #SPUnite17 - @eliostruyf React does not separate component templates
  9. 9. #SPUnite17 - @eliostruyf You write HTML in TypeScript
  10. 10. #SPUnite17 - @eliostruyf JSX and TSX Adds XML syntax to JavaScript / 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 Plain JavaScript
  11. 11. #SPUnite17 - @eliostruyf Variables in JSX / TSX <a href={blogLink.url} title={blogLink.title}>{blogLink.text}</a> React.createElement("a", { href: blogLink.url, title: blogLink.title }, blogLink.text) Plain JavaScript JSX
  12. 12. #SPUnite17 - @eliostruyf Simple component class ComponentName extends React.Component<{}, {}> { public render() { return ( <div> Component name should start with a capital letter </div> ); } }
  13. 13. #SPUnite17 - @eliostruyf Using the component component <ComponentName />
  14. 14. #SPUnite17 - @eliostruyf Events
  15. 15. #SPUnite17 - @eliostruyf Using the component component 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> ); } }
  16. 16. #SPUnite17 - @eliostruyf How do we convert this?
  17. 17. #SPUnite17 - @eliostruyf You don’t have to worry about it. In SPFx everything is already in place.
  18. 18. #SPUnite17 - @eliostruyf JSX limitations
  19. 19. #SPUnite17 - @eliostruyf Some keywords are reserved in JS / TS • class à className • colspan à colSpan • innerHTML à dangerouslySetInnerHTML • for à htmlFor • style à style (it is an object!)
  20. 20. #SPUnite17 - @eliostruyf Demo: Component
  21. 21. #SPUnite17 - @eliostruyf Inputs (props) and state
  22. 22. #SPUnite17 - @eliostruyf Input properties or props • Passing information to your component • Do not update properties in your component • Used for rendering or calculations <div> Description: {this.props.description} </div>
  23. 23. #SPUnite17 - @eliostruyf Passing props to components <ComponentName description="This is the description" />
  24. 24. #SPUnite17 - @eliostruyf Component state or state • Keep hold of the current components variables • Considered private to the component constructor(props: IProps) { super(props); // initialize the state this.state = { show: false }; }
  25. 25. #SPUnite17 - @eliostruyf Update the component state • Update state by using setState • Think of it as a request rather than an immediate command • For better performance, React may delay it this.setState((prevState, props) => { return { show: !prevState.show }; });
  26. 26. #SPUnite17 - @eliostruyf Demo: Working with props and states
  27. 27. #SPUnite17 - @eliostruyf Listing items
  28. 28. #SPUnite17 - @eliostruyf Important things when listing items • Always use a key • Try to avoid using then item index 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> ); }
  29. 29. #SPUnite17 - @eliostruyf Virtual DOM
  30. 30. #SPUnite17 - @eliostruyf Virtual DOM and change detection The real DOMVirtual DOM
  31. 31. #SPUnite17 - @eliostruyf Demo: Listing items
  32. 32. #SPUnite17 - @eliostruyf Lifecycle hooks
  33. 33. #SPUnite17 - @eliostruyf Lifecycle hooks • Mounting: • constructor, componentWillMount, componentDidMount • Updating: • componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate • Unmounting • componentWillUnmount
  34. 34. #SPUnite17 - @eliostruyf Calling APIs and storing data
  35. 35. #SPUnite17 - @eliostruyf Where to call for data • Do not do async call in the constructor • Use the componentDidMount lifecycle hook public componentDidMount(): void { this._getAsyncData().then(items => { if (items) { this.setState({ items }); } }); }
  36. 36. #SPUnite17 - @eliostruyf Demo: Retrieving async data
  37. 37. #SPUnite17 - @eliostruyf Working with SCSS in SPFx
  38. 38. #SPUnite17 - @eliostruyf Demo: Styling your component
  39. 39. Questions?
  40. 40. Office Servers & Services MVP Azure / Office 365 / SharePoint @eliostruyf www.eliostruyf.com info@estruyf.be Elio Struyf Lead trainer and architect
  41. 41. #SPUnite17 - @eliostruyf

×