The document discusses React.js, a JavaScript library for building user interfaces. It allows building modular components that efficiently update based on data changes. Many large companies use React, including Facebook, Instagram, and WhatsApp. Components, the virtual DOM, and one-way data binding are the key concepts. Components are reusable UI elements that can have state and handle events. The virtual DOM diffing algorithm allows efficient re-rendering. Data flows unidirectionally from parent to child components.

1. R E A C T. J S
by Stefano Ceschi Berrini @stecb
Rethinking UI Development
Programmers in Padua - March 18th, 2015

2. 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

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

5. Instagram

6. Facebook

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

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

9. 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.

10. 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

11. key #1: Components

12. 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

13. key #1: Components JSX
JS syntactic sugar: a concise and familiar syntax for
defining tree structures with attributes.
XML like elements => function + args

14. 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.

15. 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);

16. 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)

17. key #1: Components state
var 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);

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

19. 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

20. key #1: Components events
var 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);

21. 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

22. 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

23. 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

24. 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

25. key #3: One-way Data Binding
<ComponentA />
<ComponentB /> <ComponentD />
<ComponentC />
Data (props) flows only in one way. From the Owner to child.

26. Example

27. Not just the UI…
Architecture: Flux
React on the server: React.renderToString(component)
drumroll… React Native

28. 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

29. Thanks
Q&A