What is React?

A library for creating user interfaces using

reusable, composable components 

Used as the “V” in

a client-side MVC framework

Components, not templates

#1

Templates separate

technologies, not concerns

Display logic and markup are

tightly coupled and highly cohesive

Coupling

Cohesion

App.SayHello = Ember.Component.extend({
  actions: {
    hello: function() {
      alert('Hello ' + this.get('name'));
    }
  }
});

An example from Ember

Component class

var SayHello = React.createClass({
  onClick: function(event) {
    alert('Hello ' + this.props.name);
  },
  render: function() {
    return (
      <button onClick={this.onClick}>
        Say Hello to {this.props.name}
      </button>
    );
  }
});

Compared to React

Component Class

One way data flow

#2

Re-render the whole app on every update

Managing UI State is hard

• Mutable DOM

• Mutable data

• User input

• Asynchronous API requests

• Browser request

• Fetch data from DB

• Pass data to template

• Template renders page

Like traditional server-side rendering

• User input

• Fetch data from API

• Pass data to top component

• React renders component tree

Traditional Rendering

React Rendering

No More

• Magical data binding
• Model dirty checking
• Explicit DOM manipulation

Benefits

• Easy to reason about
• Predictable
• Decreases coupling

React components are essentially idempotent functions

Virtual DOM

#3

JavaScript is fast

On every update…

• React builds a virtual DOM tree

• Diffs the tree with the previous tree

• Computes the minimal set of DOM mutations

• Batch executes from the mutation queue

Runs in Node.js

• Isomorphic applications with shared components

• Render initial state for search indexing and caching

• React will start from initial state without re-rendering

React Examples

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

Hello React

What is JSX?

Quick detour

XML syntax extension for JavaScript

<p className="hello">
  Hello {this.props.name}
</p>

How does React use JSX?

<p className={this.props.className}>
  Hello {this.props.name.toUpperCase()}!
</p>

JavaScript Expressions

<p>
  Hello <a href="https://www.localmed.com">LocalMed</a>
</p>

Nested children

More React examples

Alright, back to

var ClickCounter = React.createClass({
  getInitialState: function() {
    return {clickCount: 0};
  },
  onClick: function() {
    this.setState({clickCount: this.state.clickCount + 1});
  },
  render: function() {
    return (
      <p onClick={this.onClick}>
        Clicks: {this.state.clickCount}
      </p>
    );
  }
});

A stateful component

• Owned by parent

• Changed by parent

• Preferred

When to use state?

• Owned by component

• Changed by component

• Avoided

Props

State

Composition

var ClickApp = React.createClass({
  getInitialState: function() {
    return {clickCount: 0};
  },
  onClick: function() {
    this.setState({clickCount: this.state.clickCount + 1});
  },
  render: function() {
    return (
      <div>
        <h2>Click App</h2>
        <a onClick={this.onClick}>Click me!</a>
        <ClickCount count={this.state.clickCount} />
      </div>
    );
  }
});

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

var ClickCount = React.createClass({
  propTypes: {
    count: React.PropTypes.number.isRequired
  },
  render: function() {
    return <p>Clicks: {this.props.count}</p>;
  }
});

Property validation

Who uses React?

How is LocalMed using React?

Openings Calendar

Styleguides

…and what the hell

is Flux?

An architecture pattern for building client-side web applications

Flux Architecture

Flux implementations

Unfortunately, there’s no clear winner

• Fluxxor

• Reflux

• Delorean

• Fluxy

• Marty

• …