Counter

Build the simplest interactive component there is: a number and a button. The number starts at 0, and every time the button is clicked the displayed value goes up by one. It sounds trivial, and the behaviour is — but it's the canonical first lesson in how a UI framework works: you don't change the number on screen yourself, you change a piece of state and let the framework re-render the view from it.

Signature

// A self-contained component. No props required.
function App(): JSX.Element;

The counter starts at 0 and increases by 1 on each click.

Examples

initial:         0
after 1 click:   1
after 2 clicks:  2
after 5 clicks:  5

The displayed number is always exactly the value held in state — there is no
separate "DOM number" to keep in sync. Change the state, the display follows.

Notes

• State drives the display. The number on screen is a view of a state value. A plain local variable (let count = 0) won't work — mutating it never tells the framework to re-render, so the screen stays at 0.
• Use the updater form. Prefer setCount((c) => c + 1) over setCount(count + 1). It reads the latest value rather than the one captured when the handler was created, so it stays correct even if you increment more than once in a row.
• Out of scope. No decrement, no reset, no minimum/maximum — just increment. (Those are the Make Counter II extensions.)