React first impression

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);
							

WTF?!

return (
  <p onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </p>
);
							

“Reaction” to React

return (
  <p onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </p>
);
							

• “Ugly.”
• “Separation of concerns!!”
• “React is a templating language.”

“Reaction” to React

return (
  <p onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </p>
);
							

• • Don’t sweat it
  • JSX
  • It’s actually just Javascript
  • It’s not a templating language
  • If you don’t like it, you don’t hafta

Rendering

Batching

Sub-tree Rendering

Selective Sub-tree Rendering

boolean shouldComponentUpdate(object nextProps, object nextState)

Back to JSX

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

JSX Compiled

var LikeButton = React.createClass({displayName: "LikeButton",
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      React.createElement("p", {onClick: this.handleClick},
        "You ", text, " this. Click to toggle."
      )
    );
  }
});