Why don't I need a ReactDOM.render() for each component?

#1

Question

Why don’t I need a ReactDOM.render() for each component?

Answer

As we will be dealing with multiple components in React, we will be coming across with the analogy that it’s structure is like a tree you have your main trunk which is also called the root component, that is the one that will have :

ReactDOM.render(<RootComponent/>, document.getElementById('root'));

there you can see

  1. we named our component RootComponent (but it is not a common practice, most likely the main component will have the name app).
  2. we are rendering it in the element with id of root, this is most likely a body tag or a div tag with id of root.

Once that is set, any other component will be related to that RootComponent, so going back to the tree analogy, our trunk component will be render using ReactDOM, and so if it had three branches we would import the Branch component in it and return them in the Trunk's component’s render():

import React from 'react';
import ReactDOM from 'react-dom';
import Branch from '../Branch/Branch';

class Trunk extends React.Component {
  
  render() {
    return(
      <div>
        <Branch/>
        <Branch/>
        <Branch/>
      </div>
    )
  }
}

ReactDOM.render(<Trunk/>, document.getElementById('root'));

There, Trunk will be rendered inside the element with id of root and an instance of branch will be rendered inside of the div from Trunk, Now what if Branch had smaller branches? They can just be returned inside of Branch, let’s say each has three too:

import React from 'react';
import ReactDOM from 'react-dom';
import SmallerBranch from '../SmallerBranch/SmallerBranch';

class Branch extends React.Component {
  
  render() {
    return(
      <div>
        <SmallerBranch/>
        <SmallerBranch/>
        <SmallerBranch/>
      </div>
    )
  }
}

export default Branch;

Now, the last part is important, because by using the keyword export we make the content of the file we just wrote into, available for import.

The same way with smaller branches having Leaf component, and for each Leaf component, they will all be only exported so they can be rendered in other components because they all are interconnected and so we only need one component to be rendered directly on an HTML element.

13 Likes
FAQ: Components Render Other Components - Apply a Component in a Render Function
#2 
class Trunk expands React.Component

Shouldn’t extends be used instead of expands? The same goes for the example with Branch:

class Branch expands React.Component
3 Likes
#3

Thank you for catching the typo, sometimes I have grammarly on and likes to switch things on me, not making excuses, but I am glad you raised the issue. Edited.

2 Likes
#4

So from my understanding of what you’ve written does that mean it’s best to only have the ReactDOM.render used only once during the entire app? and would that be during the index.js?
for example

index.js has a
ReactDOM.render(<App/>, document.getElementId("root");

app.js hass a
React.Component that gets exported with no ReactDOM.render but imports other ReactComponents from say banner.js and a card.js

is that correct?

1 Like