React Base Fiddle (JSX)

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

by jscheel

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.ui.min.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

var ReactTransitionGroup = React.addons.TransitionGroup;

var ErrorMsg = React.createClass({
    componentWillEnter: function(callback){
        Velocity(this.getDOMNode(), "transition.fadeIn", {complete: callback});
    },
    componentWillLeave: function(callback){
        console.log('sdfsd');
        Velocity(this.getDOMNode(), "transition.fadeOut", {complete: callback});
    },
    render: function() {
        return (
            <ReactTransitionGroup>
                <div>This is an error!</div>
            </ReactTransitionGroup>
        );
    }
});

var InputBox = React.createClass({
    getInitialState: function() {
        return {error: false, value: this.props.value};
    },
    handleOnChange: function(event) {
        this.setState({value: event.target.value});
        if (event.target.value === 'error') {
            this.setState({error: true});
        }
        else {
            this.setState({error: false});
        }
    },
    render: function() {
        if (this.state.error === true) {
            var error = <ErrorMsg />;
        }
        return (
            <div>
                <input type="text" onChange={this.handleOnChange} defaultValue={this.state.value}></input>
                {error}
            </div>
        );
    }
});
 
React.render(<InputBox value="changeme" />, document.body);