JSFiddle - React, Tailwind, and code Playground

by BinaryMuse

HTML

<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Hello = React.createClass({
  getInitialState: function() {
    return { point: {x: 0, y: 0}, radius: 10};
  },

  render: function() {
    return (
      <div>
      State: <pre>{JSON.stringify(this.state)}</pre>
      <button onClick={this.setXsimple}>Set X to 10 using raw setState</button>
      <button onClick={this.setXhelper}>Set X to 10 using immutability helpers</button>
      <button onClick={this.resetState}>Reset State to Default</button>
      </div>
    );
  },
  
  setXsimple: function() {
    this.setState({point: {x: 10}});
  },
  
  setXhelper: function() {
    var newState = React.addons.update(this.state, {
      point: { x: {$set: 10} }
    });
    this.setState(newState);
  },
  
  resetState: function() {
    this.setState(this.getInitialState());
  }
});
 
React.renderComponent(<Hello name="World" />, document.body);