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