Components

A React component is a JavaScript function that returns JSX. That's it. The function can do anything — fetch data, calculate values, store state — but it must return something that describes the UI.

Component names must start with a capital letter. This is not a style preference — it is how React tells the difference between a built-in HTML tag like <div> and a custom component like <Button>. Lowercase names are treated as HTML tags.

Components can render other components. You nest them exactly like HTML tags — just use the component name as the tag. This is how you build complex UIs out of small, focused pieces.

A good component does one thing. If you find a component doing too much — handling three kinds of state, rendering five different sections — that is a signal to break it into smaller components.