React is awesomeAndrei Lisnica 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 maintainingcomplex UIs.

Problem:Cascading updates -> unpredictable codeview = function(data)makes reasoning about updates trivialre-rendering on any update is slowview = function(data)transition bullet points

var App = React.createClass({ render: function() { return React.DOM.div(null, "", [ React.DOM.button({onClick: this.onClick}, "Click me!"), React.DOM.div(null, "count: " + this.state.clicks) ]) },

getInitialState: function() { return {clicks: 0} },

onClick: function() { this.setState({clicks: this.state.clicks + 1}) }})

demo here https://jsfiddle.net/alisnic/w9vt5gp3/1/

view = function(data)var App = React.createClass({ render: function() { return React.DOM.div(null, "", [ React.DOM.button({onClick: this.onClick}, "Click me!"), React.DOM.div(null, "count: " + this.state.clicks) ]) },

//})setStatevar App = React.createClass({ render: function() { return React.DOM.div(null, "", [ React.DOM.button({onClick: this.onClick}, "Click me!"), React.DOM.div(null, "count: " + this.state.clicks) ]) },

//... onClick: function() { this.setState({clicks: this.state.clicks + 1}) }})

var App = React.createClass({ render: function() { return React.DOM.div(null, "", [ React.DOM.button({onClick: this.onClick}, "Click me!"), React.DOM.div(null, "count: " + this.state.clicks) ]) },

var App = React.createClass({ render: function() { return Click me! count: {this.state.clicks} },

Why React is awesome?Declarativevar App = React.createClass({ render: function () { return this.props.names.map(function (name) { return {name} }) }})

var names = ["Ion", "Sava", "Andrei"]React.render(App({names: names}), document.getElementById('container'))

Composablevar Header = React.createClass({ render: function () { return Header }})

var Footer = React.createClass({ render: function () { return Footer }})

var App = React.createClass({ render: function () { return }})transitions hereNew way of thinkinghttps://facebook.github.io/react/docs/thinking-in-react.html

It doesnt need the dom to rendervar App = React.createClass({ render: function() { return React.DOM.div(null, "", [ React.DOM.button({onClick: this.onClick}, "Click me!"), React.DOM.div(null, "count: " + this.state.clicks) ]) },

//})data structureReact does need the dom to rendercomponents are unit-testablecomponents can be rendered on the server-side to increase page loadwho said only the browser?https://www.youtube.com/watch?v=eNC0mRYGWgc

React native demoWhat is React?created and maintained by Facebookopen sourcemakes building complex UIs easycrazy faststill young, no 1.0 yetcrazy popularReact as a movementcascading updates are evildeclarative is goodyou dont really have to use the react library to benefit from itwork more on these bullet pointslibrary, not frameworkThank you.