React Base Fiddle (JSX)

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

by Tahir Ahmed

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>

JavaScript 1.7

var ReactTransitionGroup = React.addons.TransitionGroup;
var Container = React.createClass({
    onComponentAppeared: function() {
        console.log('onComponentAppeared');
    },
    onClicked: function() {
        if(this.state.isShowing){
            this.setState({ isShowing: false });
        } else {
            this.setState({ isShowing: true });
        }
    },
    onAnimationComplete: function() {
        this.setState({ isShowing: false });
    },
    getInitialState: function() {
        return { isShowing: false };
    },
    render: function() {
        var helloWorld = this.state.isShowing ? <Hello name="World!" key="myHelloWorld" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onClicked}/>
                <ReactTransitionGroup transitionName="hellotransition">
                    {helloWorld}
                </ReactTransitionGroup>
            </div>
        );
    }
});

var MyButton = React.createClass({
    render: function() {
        return <button onClick={this.props.onButtonClicked}>Toggle</button>;
    }
});

var Hello = React.createClass({
    componentWillAppear: function(callback){
        console.log('Hello.componentWillAppear');
    },
    componentDidAppear: function(){
        console.log('Hello.componentDidAppear');
    },
    componentWillEnter: function(callback){
        console.log('Hello.componentWillEnter');
        $(React.findDOMNode(this)).stop(true).hide().fadeIn({
            duration: 1200,
            complete: function() { callback(); }
        });
    },
    componentDidEnter: function(){
        console.log('Hello.componentDidEnter');
    },
    componentWillLeave: function(callback){
        console.log('Hello.componentWillLeave');
        $(React.findDOMNode(this)).stop(true).fadeOut({
            duration: 1200,
            complete: function() { callback(); }
        });
    },
    componentDidLeave: function(){
       ...