What Is a React Component?

If you've heard people talk about React, you've definitely heard the word "component." It sounds intimidating but I promise — you already understand the concept. You just don't know it yet.

Why Do People Use React Components?

Before React, building websites was messy. You had one giant HTML file, one giant CSS file, and you prayed nothing broke when you changed something. Components changed that. Here's why every major company uses them:

• Instagram's feed: Every post you scroll past is the same Post component, just with different data (photo, caption, username, likes). Instagram didn't write custom code for each of their billions of posts — they wrote ONE Post component and reused it.
• Airbnb listings: Every listing card (photo, price, rating, location) is one ListingCard component used thousands of times with different data.
• Your shopping cart: The cart icon in the corner, each item row, the checkout button — all separate components that work together. Change the Button component once and every button on the entire site updates.
• This website you're reading right now: The nav bar, each guide card, the code blocks, the glossary tooltips — all React components.

Components let you build once, use everywhere, and change things without breaking everything else. That's why React is the most popular frontend framework and why it shows up in basically every job listing.

The LEGO Analogy

Think about a LEGO set. You don't build the whole castle as one single piece, right? You build it from smaller blocks — a wall piece, a door piece, a window piece, a tower piece.

A component is the same thing but for websites. Instead of writing one massive HTML file for your entire page, you break it into smaller, reusable pieces:

• A Navbar component (the menu at the top)
• A Button component (reusable everywhere)
• A Card component (for displaying content)
• A Footer component (the bottom of every page)

Your First Component

Here's the simplest component you can write:

1function Greeting() {
2return (
3<h1>Hey there! Welcome to my site.</h1>
4);
5}
6
7// That's it. That's a component.
8// Now you can use it like an HTML tag:
9// <Greeting />

Making It Reusable with Props

The real power of components is that you can make them flexible. Instead of hardcoding "Hey there!", what if we could change the name?

1function Greeting({ name }) {
2return (
3<h1>Hey {name}! Welcome to my site.</h1>
4);
5}
6
7// Now you can use it with different names:
8// <Greeting name='Denise' />   → 'Hey Denise! Welcome...'
9// <Greeting name='Sarah' />    → 'Hey Sarah! Welcome...'
10// <Greeting name='Bestie' />   → 'Hey Bestie! Welcome...'

Props are how parent components talk to child components. It's a one-way conversation — the parent says "here's your data," and the child displays it.

A Real Example: Profile Card

Let's build something you'd actually see on a website:

1function ProfileCard({ name, role, emoji }) {
2return (
3<div className='card'>
4<span className='avatar'>{emoji}</span>
5<h2>{name}</h2>
6<p>{role}</p>
7</div>
8);
9}
10
11// Use it like this:
12// <ProfileCard name='Denise' role='Making tech less scary' emoji='💜' />
13// <ProfileCard name='Sarah' role='Frontend wizard' emoji='✨' />
14// <ProfileCard name='Maya' role='Python queen' emoji='🐍' />

Components Inside Components

Here's where it gets really cool — components can contain other components:

1function TeamPage() {
2return (
3<div>
4<h1>Meet the Team</h1>
5<div className='team-grid'>
6<ProfileCard name='Denise' role='Founder' emoji='💜' />
7<ProfileCard name='Sarah' role='Designer' emoji='🎨' />
8<ProfileCard name='Maya' role='Developer' emoji='💻' />
9</div>
10</div>
11);
12}

Quick Recap

• A component is a reusable building block (a function that returns JSX)
• Props are how you customize a component (like settings or options)
• Component names must start with a capital letter
• Components can contain other components (nesting!)
• The goal: write it once, use it everywhere