React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.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

let fooConstructedTimes = 0;
let fooRenderedTimes = 0;

class Foo extends React.Component {
  constructor(props) {
        super(props);
        fooConstructedTimes = fooConstructedTimes + 1;
    }
    
  render() {
    console.log('When rendering Foo, foo stats are:');
    fooRenderedTimes = fooRenderedTimes + 1;
    console.log('Foo rendered: ', fooRenderedTimes);
    console.log('Foo constructedTimes: ', fooConstructedTimes);
    return <div>Foo</div>
  }
}

function Match(props) {
  if (props.matched) return props.children;
  return <div>Bar</div>;
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {active: false};
    }

    click() {
        this.setState({active: !this.state.active});
    }

    render() {
        console.log('When rendering Button foo stats was:');
        console.log('Foo rendered: ', fooRenderedTimes);
        console.log('Foo constructedTimes: ', fooConstructedTimes);

        return <div>
        <button onClick={this.click.bind(this)}>Click me</button>
        <Match matched={ this.state.active }><Foo /></Match>
        </div>;
    }
}


function Hello() {
  return <div>Hello world! <Button /></div>;
}

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