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
4.
5.
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.
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.