React Base Fiddle (JSX)

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

by Mike Cao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

var Test = React.createClass({
  getInitialState: function() {
  	return { value: 0 };
  },
  
  handleClick: function() {
    this.setState({ value: 50 });
  },
  
  render: function() {
    var val = this.state.value;
    var min = 0;
    //var max = 100; // This works
    var max = val * 2; // This causes problems
    console.log('render', val, min, max);
  	return <div>
    		<Range min={min} max={max} value={val} />
        <input type="button" value="Update" onClick={this.handleClick} />
      </div>;
  }
});

var Range = React.createClass({
  render: function() {
  	console.log('render input', this.props.value, this.props.min, this.props.max);
    return <input 
    	type="range" 
      min={this.props.min}
      max={this.props.max}
      value={this.props.value} />;
  }
});

ReactDOM.render(
  <Test />,
  document.getElementById('container')
);