React Base Fiddle (JSX)

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

by Cody Lindley

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="app"></div>

Babel + JSX

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
      this.textInput.focus();
  },
  render: function() {
    // The ref attribute is a callback that saves a reference to the
    // component to this.textInput when the component is mounted.
    return (
      <div>
        <input type="text" ref={(thisInput) => {this.textInput = thisInput}} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);