React js

Быстрый UI

без головной боли

Максим Кожух

plain javascript

REACT JS

Типичные проблемы

веб-приложений

производительность
сложный UI и логика
разработчики

MVC НАС СПАСЕТ !

Backbone

Angular

Ember

...

или нет...

REACT . JS

Model View Controller

простой синтакс
компоненты
реально быстрый

Синтакс

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


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

Мы только что освоили 30% react.js

И зачем оно надо ?

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

Виртуальный DOM

Звучит безумно - но так быстрее :)

Виртуальный DOM

Полный контроль над операциями с DOM

Применяет все изменения сразу
requestAnimationFrame
Негде воткнуть jQuery

При перерисовке

React сравнивает старый vDOM и новый

применяет только изменения

Типичные проблемы

веб-приложений

производительность
сложный UI и логика

Компоненты


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

Уровень освоения react.js 50%

Пример

Компоненты

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 код в HTML

2014

HTML теги в Javascript коде

Самый сложный пример

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

Уровень освоения react.js 80%

Самый сложный пример - 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;

Самый сложный пример

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