Building from pieces.
WHAT A COMPONENT IS
A self-contained piece of interface, with its own markup, behaviour and frequently styling.
WHY COMPONENTS
They are reusable, testable and independently understandable.
WHAT MAKES A GOOD ONE
It does one thing It receives what it needs as input It does not reach outside itself Its interface is clear
WHAT TO DEFINE FOR EACH
What it accepts What it renders Every state it supports
WHAT STATES TO INCLUDE
Default Loading Empty Error Disabled
WHY THOSE
Because they occur, and components without them fail visibly.
WHAT TO AVOID
Components with many inputs Components doing several unrelated things Duplicating a component to make a variant
WHAT TO DO INSTEAD OF DUPLICATING
Add a variant parameter.
WHAT TO KEEP OUT OF COMPONENTS
Data fetching, in presentational components Business logic
WHY
It makes them reusable and testable.
WHAT TO DOCUMENT
What each is for, and when not to use it.
