Components: Reusable Pieces of UI

Build your own components — functions that return JSX — and reuse them to compose a page, the way every real app is built.

Step 1 of 2

A component is a function that returns UI

A component is just a JavaScript function that returns JSX. That is the whole idea. App from the last lessons was already a component.

Why does React build everything from components? Because real interfaces are made of the same pieces repeated over and over. The YouTube homepage is one video-card component shown a hundred times with different data. The Amazon results page is one product-card component in a grid. A chat app is one message component stacked down the screen.

Components let you build a piece once, give it a name, and reuse it everywhere — like a cookie cutter. Fix a bug in the component, and every place that uses it is fixed at once.

Think of it this way: Think of LEGO. A LEGO set is not one giant molded shape — it is small, reusable bricks snapped together. Components are your bricks: a Button, a Card, a Navbar. You build them once, then snap them together to make any page.

Tip — capital letters matter

Component names must start with a capital letter: Welcome, not welcome. React treats lowercase names like <div> as plain HTML tags, and capitalized names like <Welcome /> as your components. Get this wrong and your component silently won't render.

Learn more on MDN

React.dev — Your first component React.dev — Importing and exporting components