React Thinking

https://slides.com/kylefritz/react-thinking

As we look at packages like react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.

-- React 0.14 release notes

Let's Re-Invent React

let golf = {
  holes: [ ... ],
  scores: [ ... ],
  player: {
    name: "Kyle",
    handicap: 20
  }
}

let render = (props) => {
    return (`
    <p>
      ${props.player.name} has played golf ${props.scores.length} times
    </p>`)
}

let html = render(golf)

document.body.appendChild(html)

It's functional

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)

let App = (props) => {
    return (
    <p>
      {props.player.name} has played golf {props.scores.length} times
    </p>)
}

React.render(<App {...golf}/>, document.body)

let's make real DOM nodes w/ JSX

let Score = (props) => {
    let total = _.reduce(props.holes, (m, h)=> m + h.score)
    return (
    <div>
      Total Score {total}
    </div>)
}

let App = (props) => {
    return (
    <div>
      <h1>{props.name} has played {props.holes.length} times</h1>
      <Score holes={props.holes} />
    </div>)
}


React.render(<App {...golf}/>, document.body)

let's make it composable

class Score extends React.Component {
    render() {
        let total = _.reduce(this.props.holes, (m, h)=> m + h.score)
        return <div>Total Score {total}</div>
    }
}

class App extends React.Component {
    render() {
        return (
        <div>
          <h1>{this.props.name} has played {this.props.holes.length} times</h1>
          <Score holes={this.props.holes} />
        </div>)
    }
}


React.render(<App {...golf}/>, document.body)

Now with classes

class Score extends React.Component {
    constructor() {
        this.state = {realScores: false}
    }
    render() {
        let total = _.reduce(this.props.holes, (m, h)=> m + h.score)
        return (<div>
          Total Score {total}
          <i onClick={=> this.toggleScores()} class="question" />
        </div>)
    }
    toggleScores() {
        this.setState({realScores: !this.state.realScores})
    }
}

Local State

1-way Data Flow

The Hype

Projection

Predictable

Serializable
Replayable
Easy to Reason about

Async

Begin Load
Data
Error

Data-binding

class SomeView extends Backbone.Model
  modelEvents:
   'change': 'render'

class OtherView extends Backbone.Model
  modelEvents:
   'change': 'render'
  initialize: ->
    @model.submodel.on('change', @render)

class LameView extends Backbone.Model
  modelEvents:
   'change': 'render'
  initialize: ->
    @model.submodel.on 'change', () =>
        @model.submodel.getSomething().on('change', @render)

Minimal App

let data = { ... }

let api = {
  getThing: function() {
    xhr((thing) => {
        data.thing = thing
        reRenderEverthing()
    })
  }
}

let reRenderEverthing = () => {
    React.render(<App {...data} />, document.body)
}