Why must React component names start with a capital letter?
JSX treats lowercase tags like div as built-in DOM elements and capitalised names like Card as variables that refer to components. A lowercase component name gets rendered as an unknown HTML tag instead.
Explain it simply
When the compiler sees <div>, it makes a string "div". When it sees <Card>, it looks for a variable called Card in scope. The capital letter is the signal that tells it which path to take.
If you name your component card in lowercase, React assumes it is an HTML tag and creates an element called <card> that the browser ignores. Nothing crashes, so this bug is confusing.
A handy habit: if a component does not appear on screen and the console is silent, check the capital letter first. The browser console may show a warning about an unrecognised tag, which is the clue.
Example
function card() { return <p>Seat 12A</p>; }
function Card() { return <p>Seat 12A</p>; }
<card /> // compiles to jsx("card"), an unknown HTML element, shows nothing
<Card /> // compiles to jsx(Card), renders the paragraphThe same rule applies to member expressions: <Menu.Item /> works because it is a property access.
What to say in the interview
"JSX uses the first letter to decide: lowercase means a built-in DOM tag passed as a string, uppercase means a component passed as a reference. So components must be capitalised. Otherwise React renders an unknown HTML element and my component never runs."
Common mistakes
- Naming a component in lowercase and seeing a blank result with no error.