React Base Fiddle (JSX)

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

HTML

<script src="http://www.jimsproch.com/react/babel-browser.js"></script>
<script src="http://www.jimsproch.com/react/future/react.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom-server.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

<input type="reset" value="reset" />

</form>

JavaScript 1.7

class TopLevel extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      index: 0,
    	controlledInputValue: 'start',
      controlledCheckboxChecked: true,
      controlledSelectValue: 'b',
    };
  }
  
  componentDidMount() {
    setInterval(() => {
      this.setState({
      	index: this.state.index + 1
      });
    }, 1000);
  }
  
  render() {
    return (
    	<div>
      	controlled input ({this.state.controlledInputValue})<br />
        <input
        	type="text"
        	value={this.state.controlledInputValue}
          onChange={e => this.setState({controlledInputValue: e.target.value})}
        />
        <hr />
        
        controlled checkbox ({this.state.controlledCheckboxChecked + ''})<br />
        <input
        	type="checkbox"
          checked={this.state.controlledCheckboxChecked}
          onChange={e => this.setState({controlledCheckboxChecked: e.target.checked})}
        />
        <hr />
        
        select ({this.state.controlledSelectValue})<br />
        <select
        	value={this.state.controlledSelectValue}
          onChange={e => this.setState({controlledSelectValue: e.target.value})}>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
        </select>
        <hr />
                
        progress ({(this.state.index % 4) === 0 ? 'null' : this.state.index % 4})<br />
        <progress
        	value={(this.state.index % 4) === 0 ? null : this.state.index % 4}
          min={0}
          max={3}
        />
        <hr />
        
        href ({(this.state.index % 4) === 0 ? 'null' : "#" + this.state.index % 4})<br />
        <a href={(this.state.index % 4) === 0 ? null : "#" + this.state.index % 4}>
        	TEST LINK
        </a>
        <hr />
      </div>
    );
  }
}

console.log(ReactDOMServer.renderToStaticMarkup(<TopLevel />));

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