React.js How to render component inside component?

Question

I am stuck. I have several seperate components on seperate files. If I render them in main.jsx like following:

ReactDOM.render(, doc         


        

Answer 1

You are right. You can use as many nested components as you want. It's one of the main concepts in react. You can access them in this.props.children. Do it like this:

var Parent = React.createClass({
  render: function() {
    return 
{this.props.children}
;
  }
});

ReactDOM.render(
  
    
    
  ,
  node
);

Read more here - https://facebook.github.io/react/docs/multiple-components.html

And here - http://buildwithreact.com/article/component-children