javascript - One Root-Element or the whole layout in ReactDOM.render()? -

so i'm learing react.js , wondering, if it's better have reactdom.render() (current status):

reactdom.render(   <div classname="container">     <div classname="row">       <div classname="twelve columns">         <header />       </div>     </div>     <div classname="row">       <div classname="six columns">         <sidebar />       </div>       <div classname="six columns">         <posts data={posts}/>       </div>     </div>   </div>,   document.getelementbyid('content') ); 

or better have root element following:

reactdom.render(   <mypageroot />,   document.getelementbyid('content') ); 

and add layout stuff (row, cols, etc) render()-method of mypageroot?

the first way not give opportunity define component state, or hook lifecycle events. also, first way become long application grows.

for these reasons, it's more common split application components, whether via react.createclass, class extends react.component or pure function returns elements.