JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

/** @jsx React.DOM */

var EditorView = React.createClass({
    render : function(){
            return (
                <div className = "well span4"> 
                    <fieldset>
                        <legend>Editor</legend>    
                        <form> 
                            <label for="firstName"> First Name :</label>
                            <input type = "text" name = "firstName" placeholder = "First Name" />
                        </form> 
                     </fieldset>
                </div>
            );
    }
});

var PreviewView = React.createClass({
    render :function(){
        return (
            <div className = "well span4"> 
                <fieldset>
                    <legend>Editor</legend>    
                    <form> 
                        <label for="firstName">First Name: </label>
                        <label name = "firstName" > </label><br/> 
                    </form> 
                 </fieldset>
            </div>
        );
    }
}); 

var QuickViewApp = React.createClass({
    render : function(){
        return (
            <div className="container row-fluid">
                <EditorView/>
                <PreviewView/>
            </div>
        );
    }
});


React.renderComponent(<QuickViewApp/>,document.getElementById('container'));