Introduction to React Components

In the last lesson you learned about Rendering Lists with JSX. Now let’s step back to the bigger picture: every button, header, and list item in React lives inside something called a component. So what is a component, really?

🤔 Why Components Exist

Picture building a whole webpage as one giant file, with everything mixed together in one long blob of code:

• The header, the menu, the photos, the comments, the footer, all in one place.
• Now say the menu has a bug. You have to scroll through that whole blob just to find it.
• Want the same menu on another page? You copy and paste the entire thing.
• Then you change one link, so now you have to fix it in five places.

That is the pain. One big blob is hard to read, hard to fix, and impossible to reuse.

Components solve this:

• They let you break the page into small, named pieces.
• You build each piece once.
• Then you use it wherever you need it.

🧩 What Is a Component?

A component is a reusable, independent piece of your interface that returns JSX describing what to show on the screen. That is the whole idea in one sentence. Let’s unpack each word.

• Reusable means you write it once and use it many times.
• Independent means it manages its own little part of the screen. It does not need to know about the rest.
• Returns JSX means it gives back a description of what the user should see, like a heading, a button, or a card.

Think of building with toy blocks. Each block is a simple shape on its own. But you snap many blocks together to build a house, a car, or a whole city. A component is one of those blocks, small and simple by itself, but you combine many of them to build a full app.

🛠️ Your First Component

Here is the simplest component you can write. It shows a friendly greeting.

function Welcome() {
  return <h1>Hello, Alex!</h1>;
}

Let’s walk through it line by line.

• function Welcome() is just a normal JavaScript function. The name starts with a capital W. That capital letter matters in React.
• return <h1>Hello, Alex!</h1> returns JSX, which is the description of what to show. Here it is a heading with some text.

Now you can use this component anywhere. You write it like an HTML tag.

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}

We wrote Welcome once. Then we used it three times. That is reuse in action. On the screen you would see the greeting repeated three times.

Hello, Alex!
Hello, Alex!
Hello, Alex!

🌳 Everything Is a Component

Here is the big idea to hold onto. In React, everything you see on the screen is a component:

• There is no other kind of building piece.
• A button is a component, right?
• A whole page is a component too.
• Even the entire app is one big component made of smaller ones.

So how do these pieces fit together?

• One component can use other components inside it.
• The outer one is the parent, and the ones inside it are the children.
• When you nest components like this, you get a shape called a component tree.

Let’s make it real. Say you are building a simple profile page. The page holds a header, a photo, and a bio. Each of those is its own component, and the page component holds them all.

function ProfilePage() {
  return (
    <div>
      <Header />
      <Photo />
      <Bio />
    </div>
  );
}

ProfilePage is the parent. Header, Photo, and Bio are its children. Here is the same idea drawn as a tree.

Read it top to bottom:

• The parent sits at the top.
• Its children branch out below.
• A real app is just a much bigger tree, where the children have their own children, going down many levels.

💡 Why This Matters

So why go to all this trouble of splitting things up? A few clear wins come out of it.

Here is the thing. When each piece is small and does one job, the whole app stays calm and easy to work with, even as it grows.

⚠️ Common Mistakes

A few slips trip people up early on. Watch for these.

• Naming a component with a small first letter. React treats lowercase names as plain HTML tags, so your component silently disappears.

// ❌ Avoid: lowercase name, React reads it as an HTML tag
function profileCard() {
  return <div>Riya</div>;
}

// ✅ Good: capital first letter so React knows it is a component
function ProfileCard() {
  return <div>Riya</div>;
}

• Forgetting to return anything. A component must return JSX. If there is no return, nothing shows up.
• Trying to return two elements side by side without a wrapper. A component returns one parent element. So wrap siblings in a single <div> or an empty <>...</>.

// ❌ Avoid: two elements returned with no single wrapper
function Card() {
  return (
    <h2>Title</h2>
    <p>Some text</p>
  );
}

// ✅ Good: wrap them in one parent element
function Card() {
  return (
    <div>
      <h2>Title</h2>
      <p>Some text</p>
    </div>
  );
}

✅ Best Practices

These small habits keep your components clean from day one.

• Give each component a clear name that says what it shows, like SearchBar or VideoCard.
• Keep each component focused on one job. If it starts doing too much, split it into smaller components.
• Always start the name with a capital letter.
• Put each component in its own file once your app grows, so things stay easy to find.

🧩 What You’ve Learned

✅ A component is a reusable, independent piece of UI that returns JSX describing what to show.

✅ In React, everything you see on the screen is a component.

✅ Components nest inside each other to form a component tree, with a parent holding its children.

✅ Splitting a UI into components gives you reuse, better organization, easier fixes, and smoother teamwork.

✅ Component names must start with a capital letter, and each one returns a single wrapping element.

🚀 What’s Next?

Now that you know what a component is, the next step is to look closely at how to actually write one the modern way and what rules it follows.

React Functional Components