React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by ccorcos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

/**@jsx React.DOM*/

function isFunction(value) {
  return (Object.prototype.toString.apply(value) == "[object Function]")
}

function isPlainObject(value) {
  return (Object.prototype.toString.apply(value) == "[object Object]")
}

function restore() {
  var func = null
  function _restore(value) {
    if (isFunction(value)) {
      func = value;
    } else if (isPlainObject(value)) {
      func && func(value)
    }
  }
  return _restore
}

var StatefulView = React.createClass({
  propTypes: {
    restore: React.PropTypes.func
  },
  getInitialState: function() {
    return {
      count: 0
    }
  },
  componentWillMount: function() {
    this.props.restore(this)
  },
  componentWillUnmount: function() {
    var count = this.state.count
    this.props.restore(function(comp) {
      comp.setState({count})
    })
  },
  inc: function() {
    this.setState({count: this.state.count+1})
  },
  render: function() {
    return (
        <div>
          <button onClick={this.inc}>inc</button>
          <div>count:{this.state.count}</div>
        </div>
    )
  }
})

var App = React.createClass({
  getInitialState: function() {
    return {
      show: true,
    }
  },
  componentWillMount: function() {
    this.rememberState = restore()
  },
  toggle: function() {
    this.setState({show: !this.state.show})
  },
  render: function() {
    var content = this.state.show ? <StatefulView restore={this.rememberState}/> : false
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>
        {content}
      </div>
    )
  }
});

React.render(<App/>, document.getElementById('container'));