React Base Fiddle (JSX)

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

by sstur

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>

CSS

* {
    color: red;
}

JavaScript 1.7

/** @jsx React.DOM */

var Frame = React.createClass({
    render: function() {
        return <iframe src="about:blank" frameBorder="0" />;
    },
    componentDidMount: function() {
        this._renderFrameContents();
    },
    componentDidUpdate: function() {
        this._renderFrameContents();
    },
    componentWillUnmount: function() {
        var frame = React.findDOMNode(this);
        frame.removeEventListener('load', this._renderFrameContents);
        var document = frame.contentDocument;
        if (document.readyState === 'complete') {
            React.unmountComponentAtNode(document.body);
        }
    },
    _renderFrameContents: function() {
        var frame = React.findDOMNode(this);
        var document = frame.contentDocument;
        if (document.readyState === 'complete') {
            React.render(this.props.children, document.body);
        } else {
          frame.addEventListener('load', this._renderFrameContents);
        }
    }
});

var Hello = React.createClass({
    render: function() {
        return <div>red <Frame><div className="foo">Hello {this.props.name}</div></Frame></div>;
    }
});
 
React.render(<Hello name="World" />, document.body);