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

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>;
  }
});

other wonders


  • Automatic event delegation  
  • Can be used with SVG, VML, Canvas
  • Can be used with NodeJS
  • Can be run with Web Worker
  • Can be tested



Typical problems 

of web apps



  • performance
  • complex UI and logic
  • developers ?

who uses it

Khan Academy


good parts



  • Easy to learn 
  • Easy to work with
  • Really fast
  • Compatibility ( MVC)
  • Facebook support

bad parts


  • compatibility  ( libs )
  • ideology
  • IE8+ only

REACT vs ANGUlAR





VS

 

 Angular

React

  • Simple 
  • Components 
  • "V" only
  • One-way binding
  • Fast
  • Complex 
  • Directives 
  • All MVC
  • Two-way binding
  • Not so fast

REACT VS ANGULAR


Vanilla JS is faster, anyway

see the difference





that's all



http://facebook.github.io/react/index.html