React Introduction
Your First Component
Written by Swapnil RajaPublished
A component is a function that returns UI. There is no base class to extend and no configuration object - if it returns JSX and its name is capitalised, it is a component.
The rules
- It is a function.
- Its name starts with a capital letter. This is not style - it is how JSX tells your components apart from HTML tags.
- It returns a single piece of JSX, or
nullfor nothing.
Capitalisation matters
jsx
function Card() {
return <div style={{ border: "1px solid #cbd5e1", padding: 12 }}>A real component</div>
}
// Lowercase: JSX treats this as an unknown HTML tag, not your function.
function card() {
return <div>Never rendered as a component</div>
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<div>
<Card />
<p>The lowercase one is not used — JSX would look for a <card> element.</p>
</div>
)