Presentación de Iván Gómez Rodríguez en el SharePoint Saturday Madrid 2017 sobre SharePoint Framework & React.

1. May 20th, 2017
SharePoint Saturday
Madrid
SharePoint Framework & React
Iván Gómez R.

2. Iván Gómez R.
SharePoint Consultant
Plain Concepts
https://geeks.ms/rockyouroffice365
https://twitter.com/ivangomezrod
Proud father, biker, geek and developer

3. WiFi Keys for Attendees
 Connect to the wireless network MSFTGUEST
 Click on Event Attendee Code and enter the access code: msevent47pu

6. What is React?
 “React is an engine for building composable user interfaces using Javascript and
(optionally) XML.”
Engine: why engine? Because of reactive UI rendering that separates state from
the UI presented. You define how state is represented on DOM elements and
how state changes updates DOM.
Creating composable user interfaces: React is oriented to creating UI
components blocks easy to reuse, extend and maintain.
Javascript: React is a pure Javascript library that can be used on the browser, the
server and mobile devices.

7. Reactive rendering
 Let us write in a declarative way how components should look and behave.
 When the data changes React renders the whole interface again.
 React uses an in-memory lightweight representation of the DOM (virtual DOM).
 Manipulating virtual DOM is faster than manipulating real DOM.
 React compares current state of the UI with the desired state and perform the
minimal set of real DOM changes.
 This is why React is the most fast and efficient framework.

8. Component-Oriented development
 Easy to create complex made of smaller components
 Written in plain JavaScript instaead of template languages or the HTML directives.
 Separtation of concerns

9. Our first react component
class Hello extends React.Component<any,any>{
render(){
return <h1>Ola k ase</h1>
}
}

10. Our first react component with dynamic values
class Hello extends React.Component<any, any>{
private message: string = "Welcome to SPS!";
render() {
return <h1>Message {this.message}</h1>
}
}

11. Component hierarchy
 Divide all UI into nested components.
 Components should be small and have single concern.
 If a component grows, it should be broken into smaller components.
 Components usually represent one piece of your data model.

12. Props
 Props are of key importance in component composition
 Mechanism used for passing data from parent to child components.
 Props can’t be changed inside the component.
 Component “configuration”

13. Our first react component with props
export interface HelloProps { message: string; user: string; }
class Hello extends React.Component<HelloProps, any> {
render() {
return <h1>Hello {this.props.user}, you have a message:
{this.props.message}!</h1>;
}
}

14. Using our first react component
ReactDOM.render(
<Hello user="Iván" message="React is better than angular" />,
document.getElementById("example")
);

15. State
 Mutable data that represents component internal state.
 When the state is updated, the component itself and its children are re-rendered.
 State is initialized in component constructor.
 Events can change component state.

16. Events
 React implements a synthetic event system.
 It achieves high performance by automatically using event delegation.
 Single event listener is attached to the root of the document.
 Event listeners automatically are removed when component unmounts.

17. React component with state and events
export class Search extends React.Component<InputProps, SearchState>{
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.state = { searchTerm: "React" };
}
private handleChange(event: any): void {
this.setState({ searchTerm: event.target.value });
}
render() {
return (
<div>
Search term: <input type="search" value={this.state.searchTerm}
onChange={this.handleChange}} />
</div>
);
}
}

18. JSX
 Looks like HTML, but it is not HTML.
 Tags attributes are camel cased.
 All elements must be balanced.
 Attributes names are based on the DOM API.
 Single root node.

19. Component lifecycle

22. Resources
 https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
 https://dev.office.com/fabric
 https://facebook.github.io/react/
 https://www.typescriptlang.org/
 https://react.rocks/
 https://geeks.ms/rockyouroffice365/

24. Please, fill your SPS Madrid
passport if you want to
participate.
You can win one of these gifts:
Raffle
10
9
8
Odor Odor@winterfell.com

25. Gold sponsors ______________
Silver sponsors
Bronze sponsors
Collaborate
Platinum sponsor