react_tutorial5.jsx

// Suppose our comment data to be given as an array of objects
var data = [
  {id: 1, author: "Hunter Thompson", text: "Where is my white powder?"},
  {id: 2, author: "Tom Wolfe", text: "Where is my white suit?"}
]

ReactDOM.render(
  // The starting point for the data array of comments
  // it's passed in as a property of <CommentBox> component
  <CommentBox data={data} />,
  // presumably, there is a DOM element with id="content" on the page
  document.getElementById("content")
);

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        {/* note the this.props.data here was passed in
            when CommentBox was instantiated above */}
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    // commentNodes is an array of Comment Components
    // note the comment data is passed into the comment author
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    // render ultimately returns a div Component
    // whose children is an array comment components
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

// and of course the comment component
var comment = React.createClass({
  render: function() {
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
        {this.props.children}
    </div>
  }
})