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

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

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