Drag the edges to resize the window.

Code Editor
Web Browser

In this lesson, you will learn your second programming pattern: separating presentational components from display components.

Click Run. In the browser, navigate to https://localhost:8000.

You are looking at an rendered <GuineaPigs /> component.

<GuineaPigs />'s job is to render a photo carousel of guinea pigs. It does this perfectly well! And yet, it has a problem: it does too much stuff.

We can break <GuineaPigs /> into smaller components, but before we do: how do we know that GuineaPigs does too much stuff? How can you tell when a component has too many responsibilities?

Separating container components from presentational components helps to answer that question. It shows you when it might be a good time to divide a component into smaller components. It also shows you how to perform that division.

Report a Bug
If you see a bug or any other issue with this page, please report it here.