Extracting ReactDOM.render() calls to separate file

Question

Background

My React app currently consists of 3 top-level components; a header, an explanation paragraph, and the app itself, wrapping a bunch of child components. The last part is fine, each child component is extracted into its own file and imported.

Now, in my main JavaScript file, I have those three components, and then at the bottom, I have a ReactDOM.render(...) call for each of them, which seems a bit untidy, especially if more components should be added later.

Question

According to today's standards, should these be extracted into their own files, and if so, what's the best (or at least a good) way to go about this?

Answer 1

In this case you can create one main component and wrap other three components, and your code will look like this

var App = React.createClass({
  render: function() {
    return <div>
      <Header />
      <Paragraph />
      <Explanation />
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById('put here your root id'));