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>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

div{
    padding:5px;
    border : 1px solid #d8d8d8;
}
input{
    width:80%;
    height:30px;
}

JavaScript 1.7

/** @jsx React.DOM */

var DisplayView = React.createClass({
    render : function(){
        return (
            <div>
                <span>Name :</span>
                <span>{this.props.text}</span>
            </div>
        );
    }
});

var EditorView = React.createClass({
    render : function(){
        return (
            <div>
                <span>
                    Name :
                 </span>
                <span>
                    <input type="text" 
                       onChange={this.props.onChange}
                       placeholder="type your name here..."/>
                 </span>
            </div>
        );
    }
});

var ContainerView = React.createClass({
    getInitialState : function(){
        return {text: ""}
    },
    handleChange : function(e){
        var currentText = e.target.value;
        this.setState({text : currentText});
    },
    render : function(){
        var text = this.state.text;
        return (  
                <div>
                    <EditorView onChange={this.handleChange}/>
                    <DisplayView text={text}/>
                </div>    
        );
    }
});


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