how to render multiple children without JSX

You can use the online Babel REPL (https://babeljs.io/repl/) as a quick way to convert little chunks of JSX to the equivalent JavaScript.

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement("div", {className: "commentBox"}, 
        React.createElement("h1", null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

It's also handy for checking what the transpiler outputs for the ES6 transforms it supports.

insin's answer is the direct translation, however you may prefer to use factories.

var div = React.createFactory('div'), h1 = React.createFactory('h1');

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      div({className: "commentBox"}, 
        h1(null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

createFactory essentially partially applies createElement. So the following are equivalent:

React.createElement(c, props, child1, child2);
React.createFactory(c)(props, child1, child2);

If you're just using es6 but aren't fond of JSX you can make it less verbose with destructuring assignment. See this jsbin for an interactive example using 6to5 instead of jsx.

var [div, h1, commentForm, commentList] = [
    'div', 'h1', CommentForm, CommentList
].map(React.createFactory);

You just add them one after another as children to your parent component,

return React.createElement("div", null, 
      React.createElement(CommentList, null), 
      React.createElement(CommentForm, null)
    );