htmlは以前用意したもの(Hello, React.js!! まずは何か表示してみる。)をそのままで。

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

var List = React.createClass({
  render: function() {
    return (
      <div className="list">
        <Message author="hoge">Hoge</Message>
        <Message author="foo">Foo</Message>
      </div>
    );
  }
});

React.render(
    <List />,
    document.getElementById('content')
);

MessageとListを作ってみました。

Listの中でMessageを呼びます。
“this.props.*”で、attributeが取れるようなので、
“this.props.author”で、”author=***”が取得できます。

“this.props.children”で、ネストされた中身が取れるようです。

上記で表示されるhtmlは

<div class="message">
  <h2 class="author">hoge</h2>
  <span>Hoge</span>
  <h2 class="author">foo</h2>
  <span>Foo</span>
</div>

“this.props.children”は、何の要素でもなかったはずですが、spanになってますね。
defaultがspanなのかな？