React Base Fiddle (JSX)

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

by metavige

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<body>
    <div id="example"></div><br/>
    
</body>

JavaScript 1.7

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { name: ''};
  },
  onNameChanged: function(event) {
      console.log(arguments);
      
      this.setState({ name: event.target.value });
  },
  render: function() {
    //var name = (this.state.name !== null) ? this.state.name : '';
    // console.log('state object:', this.state);
  
    return (
      <p>
        Hello, 
        <input type="text" onChange={this.onNameChanged} placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
        <br/>
        
        <div>{this.state.name}</div>
        
      </p>
    );
  }
});

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);