A lot of the power of ReactJS is its ability to allow nesting of components. Take the following two components:

var React = require('react');
var createReactClass = require('create-react-class');

var CommentList = reactCreateClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = reactCreateClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

You can nest and refer to those components in the definition of a different component:

var React = require('react');
var createReactClass = require('create-react-class');

var CommentBox = reactCreateClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList /> // Which was defined above and can be reused
        <CommentForm /> // Same here
      </div>
    );
  }
});

Further nesting can be done in three ways, which all have their own places to be used.

1. Nesting without using children

(continued from above)

var CommentList = reactCreateClass({
  render: function() {
    return (
      <div className="commentList">
        <ListTitle/>
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

This is the style where A composes B and B composes C.

Pros

• Easy and fast to separate UI elements
• Easy to inject props down to children based on the parent component’s state

Cons

• Less visibility into the composition architecture
• Less reusability

Good if

• B and C are just presentational components
• B should be responsible for C’s lifecycle

2. Nesting using children

(continued from above)