Component Composition

Part of the React course

You have built a card with a border and a shadow, and it looks good. Now you need the same card around a photo, and around a login form, and around a list of comments. The tempting move is to copy the card three times, or to give it a prop for every possible thing it might contain: title, photoUrl, formFields, comments. Both roads end in a component nobody wants to touch.

The way out is composition: building big things by nesting small things inside each other, so that each piece stays ignorant of the others. A picture frame is a good way to hold this. The frame has a job, which is to put a border around whatever is inside it, and it does that job without knowing or caring whether it is holding a photograph, a certificate or a child's drawing. A well-built React component is a frame.