Function Components
A function component is a JavaScript function that returns JSX.
The name must start with an uppercase letter so React treats it as a component, not as an HTML tag.
The rules
Capitalized name: Hello, not hello
Accepts one argument, often called props
Returns JSX, or null to render nothing
Must be pure: same props in, same JSX out
You wrote Fox once. You used it twice. That is reuse.
Default export vs named
Many files default-export one main component, often App or the page name.
Smaller helpers can be named exports in the same file, or their own files.
Nesting
Components can render other components. That is how pages are built.
Keep each one focused. Header does header things. Score does score things.
Purity
Do not change variables that live outside the function while rendering.
Do not fetch, do not write to localStorage, do not setTimeout in the function body.
Those belong in event handlers or in useEffect, which come later.
Tip: If you are not sure it is a component, look at the first letter. <div> is HTML. <Div> is your component.
Test yourself
Three quick questions made just for this lesson. Earn 10 XP per correct answer.