Skip to content

Instantly share code, notes, and snippets.

@mwjackson
Created October 12, 2014 19:13

Revisions

  1. mwjackson created this gist Oct 12, 2014.
    62 changes: 62 additions & 0 deletions gistfile1.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    /** @jsx React.DOM */
    var CommentBox = React.createClass({
    loadCommentsFromServer: function() {
    $.ajax({
    url: '/data/',
    dataType: 'json',
    success: function(data) {
    this.setState({commentData: data});
    }.bind(this),
    error: function(xhr, status, err) {
    console.error(this.props, status, err.toString());
    }.bind(this)
    });
    },
    componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, 5000);
    },
    render: function() {
    return (
    <div className="commentBox">
    <h1>Comments</h1>
    <CommentList data={this.props.commentData} />
    </div>
    );
    }
    });

    var CommentList = React.createClass({
    render: function() {
    var commentNodes = this.props.data.map(function (comment) {
    return (
    <Comment key={comment.id} author={comment.author}>
    {comment.text}
    </Comment>
    );
    });
    return (
    <div className="commentList">
    {commentNodes}
    </div>
    );
    }
    });

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

    React.renderComponent(
    <CommentBox commentData={comment_data} />,
    document.getElementById('content')
    );