JSFiddle - React, Tailwind, and code Playground

by thekenwheeler

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>

JavaScript 1.7

/** @jsx React.DOM */

var CommentForm = React.createClass({
    addComment: function(e){
        e.preventDefault();
        this.props.onAddComment(this.refs.comment.getDOMNode().value.trim());
        this.refs.comment.getDOMNode().value = "";
    },
    render: function() {
        return (
            <form onSubmit={this.addComment}> 
                <input type="text" name="comment" ref="comment"/>
                <input type="submit" value="Submit"/>
            </form>
        )
    }
});

var Comments = React.createClass({
    render: function(){
        
        var commentNodes = this.props.comments.map(function(comment){
            return <Comment>{comment}</Comment>;
        });
        
        return (
            <div className="comments">{commentNodes}</div>
        );
        
    }
});

var Comment = React.createClass({
    render: function(){
        return (
            <p className="comment">{this.props.children}</p>
        )
    }
});

var CommentApp = React.createClass({
    getInitialState: function() {
        return {comments: ["Hey","ladies"]};
    },
    addComment: function(comment) {
        var comments = this.state.comments;
        comments.push(comment);
        this.setState({ comments: comments});
    },
    render: function() {
        return (
            <div className="comments">
                <CommentForm onAddComment={this.addComment}/>
                <Comments comments={this.state.comments} />
            </div>
        );
    }
});
 
React.renderComponent(<CommentApp />, document.body);