Component Rendering In Action

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

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

Instructions

1.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.

2.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.

When you’re ready, press Run to continue.