REACT. J S

by Stefano Ceschi Berrini @stecb

Rethinking UI Development

Programmers in Padua - March 18th, 2015

I’m a Software Engineer @ Timerepublik.

I’m not a React expert. I’m still learning it, I’m hacking/experimenting with it and I’m really LOVING IT.

So, let’s share this learning process.

http://stecb.ninja

It’s a JavaScript library for the the UI built by

VM Cit automa(g|t)ically keeps the interface up-to-date when data changes

+

As of March, 18th 2015

Instagram

Facebook

• AirBnB • Atlassian • BBC • Imgur • Khan Academy • Pivotal Tracker • Reddit • Whatsapp • Wired • Yahoo • …

Keys

• Components (+ JSX) • Virtual DOM • One-way data binding

key #1: Components

Everything in React is a modular/reusable component:

• react HTML elements • Custom react components • Collections/composition of the above

Think about a component as a state-machine. Don’t think about the DOM.

key #1: Components

A component is a React class. It can take input data, it can have a state and you can:

• define methods • render a tree of functions

When you add a component to your UI, you’re just invoking a function.

mandatory

key #1: Components

key #1: Components

JSX

JS

optional

var HelloWorld = React.createClass({

render: function() { return <div>Hello world, {this.props.name}!</div>; }

});

React.render(<HelloWorld name="Bruce" />, document.getElementById('main'));

var HelloWorld = React.createClass({

render: function() { return React.createElement("div", null, "Hello world, ", this.props.name, "!"); }

});

React.render(React.createElement(HelloWorld, {name: "Bruce"}), document.getElementById('main'));

?harmony for ES6

key #1: Components JSX

JS syntactic sugar: a concise and familiar syntax for defining tree structures with attributes.

XML like elements => function + args

key #1: Components properties

Props are the options/configuration of a component, they are data passed from

parents to children and they are immmutable.

If you think a property of a component could changed over time, then that should be part of its state.

key #1: Components properties

var Box = React.createClass({

render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); return ( <div> <h1>{this.props.title}</h1> <ul> {list} </ul> </div> ); }

});

React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);

key #1: Components state

State is mutable and should contain data that a component's event handlers may change to trigger a UI update (i.e. User

interactions, Server responses etc)

State is optional and you should avoid it as much as possible, to reduce complexity!

setState(data, callback)

key #1: Components statevar Box = React.createClass({

getInitialState: function() { return { hasDetailsVisible: false }; }, handleToggle: function() { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); },

render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); }

});

React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);

key #1: Components events

Just three words

Forget about jQuery

key #1: Components events

http://facebook.github.io/react/docs/events.html

Synthetic events. They work identically on every browser

Clipboard, Keyboard, Focus, Form, Mouse, Touch, UI, Wheel

key #1: Components eventsvar Box = React.createClass({

getInitialState: function() { return { hasDetailsVisible: false }; }, handleToggle: function(event) { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); },

render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); }

});

React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);

key #1: Components DOM elements

var Input = React.createClass({

handleChange: function(event) { console.log(event.target.value); },

componentDidMount: function() { React.findDOMNode(this.refs.myInput).focus(); },

render: function() { return ( <input type="text" ref="myInput" onChange={this.handleChange} /> ); }

});

http://facebook.github.io/react/docs/component-specs.html

React internally uses a virtual representation of the DOM

It mutates the real DOM by using a tree diff algorithm + heuristic O(n^3) => O(n)

You can think about re-rendering your entire application on every update without worrying about performance!

key #2: Virtual DOM

https://www.flickr.com/photos/usnavy/5815022252

Why is it so fast?JS execution is FAST, real DOM mutations are SLOW

So, being able to re-render the entire application by mutating JUST what changed on the UI is the most important thing

key #2: Virtual DOM

State N State N+1

Changed attributes, just update them on the real DOM

The NodeType has changed, throw away that node (+subtree) and replace it with a new node!

key #2: Virtual DOM

key #3: One-way Data Binding

<ComponentA />

<ComponentB /> <ComponentD />

<ComponentC />

Data (props) flows only in one way. From the Owner to child.

Example

Not just the UI…

Architecture: Flux

React on the server: React.renderToString(component)

drumroll… React Native

Useful resources

Official React website

https://github.com/enaqx/awesome-react

React VS ember/angular/backbone

React.js Conf 2015 videos

Starter kit for Isomorphic webapps with React and Flux

Thanks Q&A