React

Introduction to SPA

What is an SPA?

  • "App-like" experience
  • No page reloads
  • Interaction with server "behind the scenes" (AJAX)
  • Usually follows MVC pattern

When to use SPA

  • Fluid/rich client (Gmail, iCloud, Slides)
  • Mobile/hybrid
  • High latency networks
  • Less duplicate code between client and server
  • Offload the server

Drawbacks

  • Reimplementations of functionality already available in the browser
  • Memory consumption
  • Initial load
  • Excluding older browsers
  • SEO
  • Accessibility

Server-side rendering

  • Requesting the page
  • Posting forms

Server

Client

  • Routing
  • Rendering (templates)
  • Forms (buttons, input fields)
  • Serving the client assets (HTML, CSS, JS)

SPA

  • Requesting data
  • Routing
  • Rendering
  • User interaction

Server

Client

  • Serving the client assets (HTML, CSS, JS)
  • Responding with data
Framework/Library Routing Two-way binding Modules Views
Angular X X X X
Backbone X X
Knockout   X   X
React       X

Introducing React

Why?

  • Nice component structure
  • Faster at rendering than other SPA libraries (that we've used)
  • No need to do optimizations for lists (looking at you, Knockout)
  • Simple one-way data flow

What?

  • The V in MVC
  • Compatible with IE8 and above
  • Built by Facebook

Not an MVC Framework

No two-way data binding

No event system/observables

Components

  • The building block of React
  • React.createClass({ ... })
  • this.props
  • this.state
  • render() returns a component

JSX

  • No HTML
  • HTML-ish in Javascript
  • Compilation step
  • Can be interpreted in browser when developing
  • Optional

My first component

var First = React.createClass({
  render: function () {
    return (
      <p>My first component!</p>
    );
  }
});
var Counter = React.createClass({
  getInitialState: function () {
    return {
      count: 0
    };
  },
  increaseCount: function () {
    this.setState({
      count: this.state.count + 1
    });
  },
  render: function () {
    return (
      <button onClick={this.increaseCount}>
        You clicked {this.state.count} times!
      </button>
    );
  }
});
var Counter = React.createClass({
  // ...
});

React.render(
  <Counter />,
  document.body
);

Parent to child communication

var Child = React.createClass({
  render: function () {
    return (
      <p>{this.props.text}</p>
    );
  }
});

var Parent = React.createClass({
  render: function () {
    return (
      <div className="container">
        <Child text="Pass this to the child component" />
      </div>
    );
  }
});

Child to parent communication

var Child = React.createClass({
  onDeleteClick: function () {
    this.props.onDelete();
  },
  render: function () {
    return (
      <button onClick={this.onDeleteClick}>
        Delete
      </button>
    );
  }
});

var Parent = React.createClass({
  onChildDelete: function (childData) {
    backend.delete(childData);
  },
  render: function () {
    var childData = { /* ... */ };
    return (
      <Child onDelete={this.onChildDelete.bind(this, childData)} />
    );
  }
});

Virtual DOM

  • Performs a diff to calculate actual DOM changes
  • Synthetic events

Works well with...

  • Backbone collections, models
  • Bacon.js, rx.js
  • Browserify
  • Good ol' callbacks

Server-side rendering

  • SEO
  • Fast page loads

Lab

https://github.com/jayway/react-lab

Made with Slides.com