Reactjs: Rethinking UI Devel

R E A C T. 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 C
it automa(g|t)ically keeps the interface up-to-date when data changes
+
As of March, 18th 2015

• 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
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({
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({
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 state
getInitialState: function() {
return {
hasDetailsVisible: false
};
},
handleToggle: function() {
this.setState({
hasDetailsVisible: !this.state.hasDetailsVisible
});
},
});
var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
return (
<div>
<button onClick={this.handleToggle}>toggle details</button>
<ul style={detailsStyle}>
{list}
</ul>
</div>
);
}
});

key #1: Components events
Just three words
Forget about jQuery

http://facebook.github.io/react/docs/events.html
Synthetic events. They work identically on every browser
Clipboard, Keyboard, Focus, Form,
Mouse, Touch, UI, Wheel

getInitialState: function() {
return {
hasDetailsVisible: false
};
},
handleToggle: function(event) {
this.setState({
hasDetailsVisible: !this.state.hasDetailsVisible
});
},
});
var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
return (
<div>
<button onClick={this.handleToggle}>toggle details</button>
<ul style={detailsStyle}>
{list}
</ul>
</div>
);
}
});

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();
},
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.

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

Reactjs: Rethinking UI Devel

More Related Content

Similar to Reactjs: Rethinking UI Devel

Recently uploaded

Reactjs: Rethinking UI Devel