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?

score 1 · Accepted Answer · answered Jul 16 '16 at 05:14

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'));

score 0 · Answer 2 · answered Jul 16 '16 at 09:09

0

use only one entry point for ReactDom.render

class App extends React.component {

render(){
       <div>
          <Header />
          <ParagraphExplanation />
      </div>

}

}

ReactDOM.render(<App />, document.getElementById('id'));

answered Jul 16 '16 at 09:09

Piyush.kapoor

6,715
1
21
21

Ah ok, so just slap everything inside one big wrapper? – Alec Jul 16 '16 at 09:49
yes absolutely . Your APP component is the wrapper here – Piyush.kapoor Jul 16 '16 at 10:34

Extracting ReactDOM.render() calls to separate file

2 Answers2