Layout Components and the Split Screen Pattern

Hands-on practice for this lecture. Write the code, see it run, understand the pattern.

Exercise 1 of 2

Why Split Screen Scales

Three quick checks that show why PascalCase, flex ratios, and children make a split screen reusable in real layouts.

start here, then build the fix

What this quiz proves

These three checks show why the split screen pattern is reusable instead of one-off: JSX naming, width ratios, and the children pattern.

Question 1

CodeJSX needs a component reference here

const SplitScreen = ({ left: Left, right: Right }) => (

</Container>

);

Why are "left" and "right" immediately renamed to "Left" and "Right" in the destructuring?

Question 2

CodeThis line decides the split ratio

</SplitScreen>

What fraction of the screen does the right panel occupy?

Question 3

CodeThe layout stays ignorant of child props

const SplitScreen = ({ children, leftWidth = 1, rightWidth = 1 }) => {

const [left, right] = children;

...

};

What advantage does the children pattern have over passing Left and Right as named props?

0 / 3 answered

Exercise 2 of 2

Build a Reusable Split Screen

Live editor: turn a two-panel layout into a reusable component that keeps layout separate from child props and panel widths.

start here, then build the fix

What you gain

One wrapper for any two-panel layout
Separate layout from the content inside each panel
Pass child props without turning the wrapper into a middleman

Task

Complete SplitScreen.js so it uses leftWidth and rightWidth as flex ratios. Then update App.js to render Sidebar and MainContent through the same reusable wrapper.

Loading editor…

Hint: change flex: 1 to flex: leftWidth and flex: rightWidth. Then use the children pattern so each panel keeps its own props.

Re-read the lecture All lectures →