JSFiddle - React, Tailwind, and code Playground

by goffreder

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.header {
    height : 50px;
    background : #dddddd;
}

JavaScript 1.7

/** @jsx React.DOM */

var LoginForm = React.createClass({
    _onSubmit : function(e) {
        e.preventDefault();
    
        var username = this.refs.username.getDOMNode().value.trim();
        
        if(!username) return;
        
        alert(username);
        
        this.refs.username.getDOMNode().value = "";
        
        return
    },

    render : function() {
        return (
            <div>
                <form onSubmit={this._onSubmit}>
                    <input
                        type="text"
                        placeholder="Insert username"
                        ref="username"
                    />
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }
});

var Header = React.createClass({
    render : function() {
        return (
            <div className="header">
                <LoginForm />
            </div>
        );
    }
});

var Content = React.createClass({
    render : function() {
        return (
            <div className="content">Welcome, [username]</div>
        );
    }
});

var MyApp = React.createClass({
    render : function() {
        return (
            <div>
                <Header />
                <Content />
            </div>
        );
    }
});

React.renderComponent(
    <MyApp />,
    document.body
);