React is awesome

Andrei Lisnic

a JavaScript library for building

user interfaces

https://github.com/facebook/react/wiki/Sites-Using-React

Born @ facebook ads team

...from the struggle of building and maintaining
complex UIs.

Problem:
Cascading updates -> unpredictable
code

view = function(data)

view = function(data)
- makes reasoning about updates trivial
- re-rendering on any update is slow

var App = React.createClass({

ren d er: function() {
return React.D O M .div(null, "", [
React.D O M .button({onClick: this.onClick}, "Click m e!"),
React.D O M .div(null, "count: " + this.state.clicks)
])
},
getInitialState: function() {
return {clicks: 0}
},
onClick: function() {
this.setState({clicks: this.state.clicks + 1})
}
})

view = function(data)
var App = React.createClass({
ren d er: function() {
return React.D O M .div(null, "", [
React.D O M .button({onClick: this.onClick}, "Click m e!"),
React.D O M .div(null, "count: " + this.state.clicks)
])
},
//
})

setState
var App = React.createClass({
ren d er: function() {
return React.D O M .div(null, "", [
React.D O M .button({onClick: this.onClick}, "Click m e!"),
React.D O M .div(null, "count: " + this.state.clicks)
])
},
//...
onClick: function() {
this.setS tate({clicks: this.state.clicks + 1})
}
})

var App = React.createClass({

ren d er: function() {
return React.D O M .div(null, "", [
React.D O M .button({onClick: this.onClick}, "Click m e!"),
React.D O M .div(null, "count: " + this.state.clicks)
])
},
var App = React.createClass({
ren d er: function() {
return < div>
< button onClick= {this.onClick}> Click m e!< /button>
< div> count: {this.state.clicks}< /div>
< /div>
},

Why React is awesome?

Declarative
var App = React.createClass({
render: function () {
return this.props.nam es.m ap(function (nam e) {
return < p> {nam e}< /p>
})
}
})
var nam es = ["Ion","Sava","Andrei"]
React.render(App({nam es: nam es}),docum ent.getElem entById('container'))

Composable
var H eader = React.createC lass({
render: function () {
return < p> H eader< /p>
}
})
var Footer = React.createClass({
render: function () {
return < p> Footer< /p>
}
})

var App = React.createClass({

render: function () {
return < div>
< H eader />
< div class= content> < /div>
< Footer />
< /div>
}
})

New way of thinking

https://facebook.github.io/react/docs/thinking-in-react.html

It doesnt need the dom to render

var App = React.createClass({
ren d er: function() {
return React.D O M .div(null, "", [
React.D O M .button({onClick: this.onClick}, "Click m e!"),
React.D O M .div(null, "count: " + this.state.clicks)
])
},
//
})

data structure

React does need the dom to render

- components are unit-testable
- components can be rendered on the serverside to increase page load
- who said only the browser?

https://www.youtube.com/watch?v=eNC0mRYGWgc

React native demo

What is React?
-

created and maintained by Facebook

open source
makes building complex UIs easy
crazy fast
still young, no 1.0 yet
crazy popular

React as a movement
- cascading updates are evil
- declarative is good
- you dont really have to use the react library
to benefit from it

Thank you.