React js

Quick UI

without worries

by Maksim Kozhukh

plain javascript

REACT JS

Typical problems

of web apps

performance

complex UI and logic

developers

MVC will help us !

Backbone

Angular

Ember

...

or won't ...

REACT . JS

Model View Controller

simple syntax
components
really fast

syntax

var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p("Hello world");
  }
});


React.renderComponent(
    HelloWorld(),
    document.getElementById('example')
);

We've just learned 30% of react.js

what do we need it for ?

return React.DOM.ul([
    React.DOM.li("Option A"),
    React.DOM.li("Option B")
])


    return "<ul><li>Option A</li><li>Option B</li></ul>";

VS

Virtual DOM
Sounds crazy, but it works faster :)

Virtual DOM

Full control over DOM manipulation

applies all the changes at once
requestAnimationFrame
no space left for jQuery

During the rendering process

React compares the old vDOM with the new one

and applies only the changes

Typical problems

of web apps

performance
complex UI and logic

Components


var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p( "Hello world " + this.props.index );
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( HelloWord({ index: i }));

    return React.DOM.div(worlds);
  }
});

The level of learning react.js is 50%

Example

Components

var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p( "Hello world " + this.props.index );
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( HelloWord({ index: i }));

    return React.DOM.div(worlds);
  }
});

jxl

/** @jsx React.DOM */
var HelloWorld = React.createClass({
  render: function(){
    return <p>Hello world {this.prop.index}</p>;
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( <HelloWorld index={i} />  );

    return <div>(worlds)</div>;
  }
});

JXL

2000

Javascript code in HTML

2014

HTML tags in Javascript code

The most difficult example

var HelloUniverse = React.createClass({
  getInitialState:function(){
    return { start: 0; } 
  },
  shiftNext:function(){
    this.setState({ start : this.state.start + 1 });
  },
  render: function() {
    var worlds = [];
    var start = this.start.state;

    for(var i=start; i<start + 10000; i++) 
      worlds.push( <HelloWorld index={i} onClick={this.onClick} />  );

    return <div onClick={this.shiftNext}>(worlds)</div>;
  }
});

The level of learning react.js is 80%

The most difficult example - State

var HelloUniverse = React.createClass({
  getInitialState:function(){
    return { start: 0; } 
  },
  shiftNext:function(){
    this.setState({ start : this.state.start + 1 });
  },
  render: function() {
    var worlds = [];
    var start = this.start.state;

The most difficult example

  render: function() {
    var worlds = [];
    var start = this.start.state;

    for(var i=start; i<start + 10000; i++) 
      worlds.push( <HelloWorld index={i} onClick={this.onClick} />  );

    return <div onClick={this.shiftNext}>(worlds)</div>;
  }
});