Components — reusable building blocks
Everything in React is a component
A component is a reusable piece of UI, written as a JavaScript function that returns JSX. Think of components like LEGO blocks — you build small ones and snap them together into a whole app.
function Welcome() {
return <h1>Welcome to my app!</h1>;
}
That is a complete React component. The rules:
- It is a function that returns JSX.
- Its name must start with a capital letter (
Welcome, notwelcome) — that is how React tells your components apart from regular HTML tags.
How do I use a component?
You use it like a custom HTML tag:
function App() {
return (
<div>
<Welcome />
<Welcome />
</div>
);
}
Write Welcome once, reuse it as many times as you want. That reuse is the whole point.
Building bigger UIs by nesting
Real apps are components inside components:
function Navbar() { return <nav>My Site</nav>; }
function Footer() { return <footer>© 2026</footer>; }
function App() {
return (
<div>
<Navbar />
<h1>Home Page</h1>
<Footer />
</div>
);
}
You compose a page out of small, named pieces. Each one is easy to read, test, and reuse.
Why is this so powerful?
Because you build a Button or a Card once, and use it across the whole app. Fix a bug in one place, and it is fixed everywhere. Big apps stay organized instead of becoming chaos.
A component = a function that returns JSX, named with a Capital letter. Build small pieces, nest them, reuse them. That is React's core idea.