Composition: one Column, any content
The parent decides what goes into each column: cards, nothing, or buttons in the actions slot. Column never changes.
Milestone 1: build the board as a static version first, components drawn from data with props only and no state, using composition so a Column can hold any content, and style it with plain CSS.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a count badge to Column that turns red when the column has more than 3 cards (a WIP limit).
Write a Board that shows an <h2> "No tasks yet" when tasks is empty, instead of three empty columns.
Explain it without notes
Why build a static version of the UI first?
How does composition with children make Column reusable?
Why must the card key be the task id and not the index?
Preview
Console
Nothing logged yet.Expected console output
To do: 2 cards, 1 buttons
Doing: 0 cards, 0 buttons
Done: 1 cards, 1 buttons