React

@samselikoff

What is React?

  • A JS lib from Facebook for building user interfaces on the web
  • Just the "V" in MVC; doesn't know how to persist your data, doesn't affect routing, etc.
  • Primitive is a "Component"; surprisingly powerful
    • you build apps out of nested components
  • Can "iterate into" it

Motivation

  • Modeling state over time is the hardest part of GUIs

  • Difficult to remember end state after series of dynamic changes

  • Old server-side model doesn't have this problem

  • Ideally, just describe how your component looks at any time based on its state, and "refresh" whenever data changes

React's solution

  • Make state explicit: getInitialState, setState
  • Single render function
  • React re-renders each time via virtual DOM

With React, we get this

Other points

  • Separation of "technologies," not concerns
  • Typically templates are deliberately dumb. But keeping templates right in our component code gives us the full expressive power of a programming language.

Separation of templates and component code is artificial

Other points

  • Not really embracing web standards

    • hate the DOM

    • don't think web components are a really good way to build UIsĀ 

  • Rendering server-side vs shipping an app to the browser

Philosophical differences

Example

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.render(<Timer />, mountNode);

Example

  • `render` returns a description of what it wants its UI to look like

    • Not actual DOM nodes, but lightweight descriptors. "Create an H3 and and div please". Virtual DOM

    • React manages the actual DOM nodes for you

    • uniform interface: initial + update are both in render

  • No DOM manipulation in our react class

    • we're only concerned with what to render, now how to render it

  • Components doesn't care about the current state of the DOM

My example

  • Original
    • https://www.ted.com/profiles/239263/translator
  • React
    • http://jsfiddle.net/samselikoff/kb3gN/7777/

Thanks!

@samselikoff