React Base Fiddle (JSX)

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

by BinaryMuse

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>

<!-- this html rendred by React.renderToString -->
<div id="container"><div data-reactid=".0" data-react-checksum="-486839778"><span data-reactid=".0.0">Hello, </span><span data-reactid=".0.1">JSFiddle</span><span data-reactid=".0.2">! You&#x27;ve clicked the button </span><span data-reactid=".0.3">10</span><span data-reactid=".0.4"> times.</span><div data-reactid=".0.5"><button data-reactid=".0.5.0">Click Me!</button></div></div></div>

JavaScript 1.7

var App = React.createClass({
  getInitialState: function() {
    return {
      count: this.props.count
    };
  },
  
  render: function() {
    return (
      <div>
        Hello, {this.props.name}! You've clicked the button {this.state.count} times.
        <div>
          <button onClick={this.handleClick}>Click Me!</button>
        </div>
      </div>
    );
  },
  
  handleClick(e) {
    this.setState({count: this.state.count + 1});
  }
});

// this HTML placed into the document, above
var html = React.renderToString(<App name="JSFiddle" count={10} />);
console.log(html);

// rendering into the same container "upgrades" to an interactive app
setTimeout(function() {
  React.render(<App name="JSFiddle" count={10} />, document.getElementById('container'));
}, 1000);