Skip to Content
Components Render Other Components
Component Rendering In Action

Now you’re ready for <ProfilePage /> to render <NavBar />!

All that’s left to do is render <ProfilePage />.



At the bottom of ProfilePage.js, use ReactDOM.render() to render an instance of ProfilePage.

For ReactDOM.render()‘s second argument, pass in document.getElementById('app').

Once the result has rendered in the browser, look at the render methods of both ProfilePage and NavBar. Try to figure out exactly which parts of the browser’s display come from which component class.


Congratulations! It may not seem like a big deal yet, but you’ve just discovered the key to React’s power.

By nesting components inside of other components, you can build infinitely complex architectures, even if each component is relatively simple. The relationship that you just built is the fundamental relationship of React.js.

Folder Icon

Take this course for free

Already have an account?