React

DOM

Views

Model

Backbone

jQuery

React

Just the UI

The V in MVC

Templates separate technologies,

not concerns

JSX

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

JSX


var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

var Weekend = React.createClass({
  getInitialState: function() {
    return { selected: false };
  },
  onClick: function() {
    this.setState({ selected: !this.state.selected });
  },
  render: function() {
    var createTheme = function(theme, index) {
      return <span className="Weekend-theme">{theme}</span>;
    };
  
    return (
      <div onClick={this.onClick} className={'Weekend'+(this.state.selected?'is-selected':'')}>
        <img className="Weekend-image" src={this.props.data.imageUrl}/>
        <div className="Weekend-infos">
          <div className="Weekend-label">{this.props.data.label}</div>
          <div className="Weekend-themes">
            {this.props.data.topTheme && this.props.data.topTheme.map(createTheme)}
          </div>
        </div>
      </div>
    );
  }
});

Components

var Hotel = React.createClass({
  render: function() {
    var createWeekend = function(weekend, index) {
      return <Weekend data={weekend} />
    };
    
    return (
      <div className="Hotel">
        <h2 className="Hotel-name">{this.props.data.label}</h2>
        <span className="Hotel-address">{this.props.data.location.address}</span>
        <span className="Hotel-review">
            {this.props.data.review ? this.props.data.review.average : ''}
        </span>
        <div className="Hotel-weekends">{this.props.data.weekend.map(createWeekend)}</div>
      </div>
    );
  }
});

Components

var HotelsList = React.createClass({
  loadHotels: function() {
    // [...]
    request.open("GET", this.props.url, true);
    hotelsList.setState({ hotels: JSON.parse(request.responseText).exactMatch });
  },
  getInitialState: function() {
    return { hotels: [] };
  },
  componentDidMount: function() {
    this.loadHotels();
  },
  render: function() {
    var createHotel = function (hotel) {
      return <Hotel data={hotel} />;
    };
    return (
      <div className="HotelsList">
        <h1 className="HotelsList-title">Hello ! I am listing {this.state.hotels.length} hotels</h1>
        { this.state.hotels.map(createHotel) }
      </div>
    );
  }
});

React.render(
  <HotelsList url="http://api.weekendesk.com/api/weekends.json?orderBy=priceQuality[...]" />,
  document.getElementById('hotelsList')
);

Components

React re-renders the whole app on every update

Components describe your UI at a point in time

No more explicit DOM operations

This seems good ! But... re-rendering on every change does sound expensive ?! You know... as DOM is slow and all.

Virtual DOM

DOM

Views

Model

React

VIRTUAL DOM

DOM

Views

VIRTUAL DOM

VIRTUAL DOM

Computes minimal set of mutations

Diff

Batch execute

React

  • Simple declarative components

  • Re-rendering on updates

  • Simple and fast Virtual DOM

One more thing on Virtual DOM

Server-side rendering with Node.js

no more pre-render.io

Going native

learn once, write everywhere

Thanks !

React introduction

By Thibaut Dutartre

Made with Slides.com

React introduction

  • 45

More from Thibaut Dutartre