Components describe reusable parts of an interface. JSX expressions insert values, while component boundaries should follow meaningful responsibilities.

Worked example

function Metric({label,value}) { return <article><p>{label}</p><strong>{value}</strong></article>; }

Put it into practice

Break an academy dashboard into a shell, metric grid, course table, and filter toolbar.

Check your understanding

• Explain the main idea in your own words.
• Compare your result with the worked example and identify any assumptions you made.
• Record one question or edge case to discuss with your instructor.

Connect this to your project

Build an academy dashboard with enrollment metrics, searchable course rows, filters, and a responsive navigation drawer.

Keep the output of this activity in your project folder. You will use it when you review and present your final work.