© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

SELA DEVELOPER PRACTICEDecember 20th-24th 2015

Introduction to ReactSebastian Pederivasebastianp@sela.co.il@spederiva

https://github.com/spederiva/ReactWorkshophttp://tiny.cc/react_workshop

AgendaReact vs AngularJsKnow ReactComponentsJSXVirtual DOMTODO demoWhy React

Don’t compare React to AngularThe V in the MVCReact is just for viewsReact don’t provide router, model and event layers

React? What?React does one thing and does it wellA library for creating user interfaces

Not a frameworkRenders your UI and responds to eventsMade by Facebook

b

<TODO> <Header></Header> <TodoList></TodoList> <Footer></Footer></TODO>

Encapsulated and interoperable custom elements that extend HTML itselfBuild components, not templatesA component should ideally only do one thingUse components to separate your concerns

var HelloWorld = React.createElement( "h1", null, "Hello World!");

React knows to build Components

JSXXML-LIKE SYNTAX EXTENSION TO ECMASCRIPT

JSXJSX lets you create JavaScript objects using HTML syntaxOptionalCombines ease-of-use of templates with power of JavaScriptPreprocessor translates to plain JavaScript:

On the fly (suitable during development)Offline using the React-CLI

http://facebook.github.io/jsx

Setup for JSX transpilershttps://facebook.github.io/react/docs/getting-started.html

<div ng-if="showFrom(message)"><div>From: {{message.from.name}}</div>

</div><div ng-if="showCreatedBy(message)">

<div>Created by: {{message.createdBy.name}}</div>

</div><div ng-if="showTo(message)">

<div>To: {{message.to.name}}</div></div>

What about separation of concerns

Reduce coupling, increase cohesionCoupling: “The degree to which each program module relies on each of the other modules.”Cohesion: “The degree to which elements of a module belong together.”Templates encourage a poor separation of concerns.

Templates separate technologies, not concerns

var HelloWorld = React.createClass({ render(){ var name = getParameterByName("name"), greet;

if (name) { greet = <h1>Hello {name}</h1>; } else { greet = <h1>Hello anonymous</h1>; }

return ( <div> {greet} </div> ) }});

What about separation of concerns

Props are select pieces of data that are passed to child components from a parent and are immutable by the child

var HelloWorld = React.createClass({ render() { return (<div>Hello {this.props.name}!!</div>); }});

ReactDOM.render(<HelloWorld name="Sebastian" />, document.getElementById("example")

);

Props

States are component data that the component sets itself via: getInitialStatethis.setState

State and UI always must be syncedhttp://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-statevar HelloWorld = React.createClass({

getInitialState(){ return{ name: "" } }, handleOnChange(e){ this.setState({ name: e.target.value }); }, render() { return (<input value={this.state.name} onChange={this.handleOnChange} />); }

});

State

StateProps State

Can get initial value from parent Component? 👍 👍

Can be changed by parent Component? 👍 ❌

Can set default values inside Component? 👍 👍

Can change inside Component? ❌ 👍

Can set initial value for child Components? 👍 👍

Component Life CycleMounting/Unmounting Update

getInitialState()getDefaultProps() componentWillMount()render()

componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render()

componentDidMount() componentWillUnmount()

componentDidUpdate() * State before and after DOM manipulations

DOM StateData-Binding

One way bindingTwo way binding

What with the DOM?

Data Render

Re-Render All The Things

Re-render the whole app on every update

What with the DOM?

Virtual DOMAbstract version of the DOMOptimized for performance and memory footprint

Create elements for a ”Virtual DOM”Using React, you usually don't deal with DOM elements directly

Compute minimal set of changes to apply to the DOMBatch execute all updates

Re-render on Every UpdateEvery place data is displayed is guaranteed to be up-to-dateNo magical data bindingNo model dirty checkingNo more explicit DOM operationsThe re-render will occur when React decides it's ready

How it works…React builds a new virtual DOM subtree…diffs it with the old one…computes the minimal set of DOM mutations and puts them in a queue…and batch executes all updates

Demo

Making a TODO list

Virtual DOM in other contextsServer renderingReact Native

https://facebook.github.io/react-native React-Canvas

https://github.com/Flipboard/react-canvas

React-CanvasReact Canvas adds the ability for React components to render to <canvas> rather than DOMMade by Flipboard

https://github.com/Flipboard/react-canvas

Sampleshttp://floppybox.baylaunch.com/https://react.rocks/tag/Canvas

Why React?Simplify codeBuild Reusable ComponentsVirtual DOMBuild Isomorphic appsEliminate querying / modifying DOMSmall API / Easy to learn & rememberSame architecture, different output

Questions