React javascript version

comments.js

var comments = [
  {author: "Pete Hunt", text: "This is a text"},
  {author: "Suvash", text: "This is *another* comment"}
];

// Data is local to components,
// passed down from the parent
// this.props - immutable
// this.state - mutable
// this.setState() => triggers render

// Component Lifecycle
// http://facebook.github.io/react/docs/component-specs.html
// willMount, didMount, willUpdate, didUpdate, render etc
var Comment = React.createClass({
    render: function() {
        return React.DOM.div({className: "comment"},
            React.DOM.h2({className: "commentAuthor"}, this.props.author),
            React.DOM.span(null, this.props.text)
        );
    }
});


var CommentList = React.createClass({
    render: function() {
        var comment_nodes = [], i;
        for (i = 0; i < this.props.comments.length; i++) {
            var comment = this.props.comments[i];
            comment_nodes.push(Comment({author: comment.author,
                                        text: comment.text}));
        }
        return React.DOM.div({className: "commentList"}, comment_nodes);
    }
});

var CommentBox = React.createClass({
//    componentWillMount: function() {
//        $.ajax({...
//            success: function(data) {
//                this.setState({comments: data});
//            } ...
//        });
    render: function() {
        return React.DOM.div({className: "commentBox"},
            React.DOM.h1(null, "Comments"),
            CommentList({comments: this.state.comments})
        );
    }
});


React.renderComponent(
    CommentBox({comments: comments}),
    document.getElementById('content')
);