React Base Fiddle (JSX)

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

by mike_123

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.4/semantic.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.4/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.4/themes/basic/assets/fonts/icons.woff"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
</div>

CSS

body { margin: 10em; }

JavaScript 1.7

var Hello = React.createClass({
    getInitialState: function() {
        return { showForm: false };
    },
    showForm: function() {
        this.setState({showForm: true});        
    },
    render: function() {
        return (
            <div>
                <Dialog open={this.state.showForm} header="The Header">
                  Content
                </Dialog>
                <div id="frown" className="ui labeled red icon button" onClick={this.showForm}>
                    <i className="frown icon"></i>Open Modal
                </div>
            </div>
            );
    }
});



var Dialog = React.createClass({
    render: function() {
        return <div className="ui modal"/>;
    },

    componentDidMount: function() {
        this.node = this.getDOMNode();
        this.$modal = $(this.node);
        
        this.$icon = $("<i class='close icon'></i>");
        this.$header = $("<div class='header'></div>").html(this.props.header);
        this.$content = $("<div class='content'></div>");

        this.$modal.append(this.$icon);
        this.$modal.append(this.$header);
        this.$modal.append(this.$content);
        
        this.renderDialogContent(this.props);
    },

    componentWillReceiveProps: function(newProps) {
        this.renderDialogContent(newProps);
    },

    renderDialogContent: function(props) {
        props = props || this.props;

        React.render(<div>{props.children}</div>, this.$content[0]);              

        if (props.open) {
            this.$modal.modal('show');
        }
        else {
            this.$modal.modal('hide modal');
        }
    },

    componentWillUnmount: function() {
        this.$modal.modal('destroy').remove();
        React.unmountComponentAtNode(this.node);
    },

    getDefaultProps: function() {
        return {
            title: ''
        }
    }
});
React.render(<Hello />, document.getElementById('container'));