Using React Components

In the last lesson you learned about Creating React Components. So now you have a component. But here is the thing:

• A component is just a function that returns some JSX.
• A component sitting alone in a file does nothing. Nobody sees it yet.
• You have to actually use it somewhere for it to show up on the screen.

This lesson is about that step. You will take a component you made and put it to work inside another component.

🤔 Why Do We Even Need to “Use” a Component?

Think about it like this. You wrote a recipe on a card and put it in a drawer. The recipe is real. But no food appears until someone takes the card out and cooks it.

A React component works the same way:

• Writing the function is only half the job, so the screen stays empty at first.
• Nothing shows until some other part of your app says “show this one here”.
• That act of placing a component into your JSX is what we mean by using a component.
• The good news? Using a component feels just like writing an HTML tag. If you can write <p> or <button>, you can already use a component.

🧩 First, Bring the Component In

Most of the time the component you want to use lives in a different file. So step one is to bring it over with import.

Say you have a small component in a file called Greeting.jsx:

function Greeting() {
  return <h2>Hello, welcome to React!</h2>;
}

export default Greeting;

That export default Greeting line is the important part. It is the component saying “I am available for other files to grab”. Now in another file, you pull it in:

import Greeting from "./Greeting";

Let’s walk through that import line:

• import tells React you want something from another file.
• Greeting is the name you are giving the thing you are importing. Because it was a default export, you can call it whatever you like. But matching the real name keeps things clear.
• "./Greeting" is the path to the file. The ./ means “in the same folder as this file”. You can leave off the .jsx ending because the build tool fills it in for you.

So why bother with imports at all?

• React apps are split across many small files, so imports are how those files find each other.
• Without the import, the App file has no idea your Greeting component exists.

🏷️ Now Use It Like a Tag

Once a component is imported, you use it by writing its name inside angle brackets, exactly like an HTML tag. Here is Greeting being used inside an App component:

import Greeting from "./Greeting";

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

export default App;

Look at the <Greeting /> line. That is you telling React what to do:

• Take everything Greeting returns and drop it right here.
• React runs the Greeting function and gets back the <h2>.
• Then it puts that <h2> on the screen inside the <div>.

Here is what the person looking at the page actually sees:

Hello, welcome to React!

Notice the <Greeting /> has a slash before the closing bracket. That is the self-closing form. Here is what that means:

• The component has nothing written between an opening and closing tag, so we close it in one go.
• It works just like <img /> or <br /> in HTML.
• You could also write <Greeting></Greeting> and it would work the same way. But the self-closing form is shorter and cleaner when there is nothing inside.

🔁 Use It as Many Times as You Want

Here is where components start to feel useful. Once you have made one, you can drop it in over and over. Each time you write the tag, you get a fresh copy of that UI.

Imagine a page that should greet three people. You do not write the <h2> three times. You just use Greeting three times:

import Greeting from "./Greeting";

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

export default App;

And the page shows the same greeting three times:

Hello, welcome to React!
Hello, welcome to React!
Hello, welcome to React!

This is the real payoff of components:

• Write the UI once, then reuse it as many times as you need.
• If you later change the text inside Greeting, all three copies update together. They all come from the same function, see?
• So there is no copy-paste, and no hunting through the file to fix the same thing in three places.

🔠 The Capital Letter Rule You Cannot Skip

This one trips up almost everyone at the start, so read it carefully. A custom component tag must start with a capital letter.

React uses the first letter to decide what your tag means:

• Starts with a capital letter, like <Greeting />. React treats it as your component and runs your function.
• Starts with a lowercase letter, like <greeting />. React thinks it is a normal HTML tag and tries to render a plain <greeting> element, which is not real HTML.

So the casing is not a style choice. It changes how React reads your code.

function App() {
  return (
    <div>
      {/* ❌ Avoid: lowercase — React treats this as an unknown HTML tag */}
      <greeting />

      {/* ✅ Good: capital first letter — React renders your component */}
      <Greeting />
    </div>
  );
}

Here is why the lowercase version is so sneaky:

• It will not show your greeting at all. React just makes an empty, meaningless element and your text never appears.
• There is no error popup either, so it can be very confusing.
• That is why the habit of capital-first component names matters from day one.

🧾 Quick Reference

Here are the two tag forms and when to reach for each:

⚠️ Common Mistakes

A few slip-ups show up again and again when people start using components:

• Forgetting the import. You use <Greeting /> but never imported it. React cannot find it and the build complains that Greeting is not defined.
• Lowercase tag name. Writing <greeting /> instead of <Greeting />. As we saw, this quietly renders nothing.
• Forgetting the slash on a self-closing tag. Writing <Greeting> with no closing tag and no slash. JSX needs every tag closed, so this breaks.
• Wrong file path in the import. "./Greting" with a typo, or pointing at the wrong folder. The file is not found and nothing loads.
• Forgetting export in the component file. If Greeting.jsx never exports the function, the import has nothing to grab.

✅ Best Practices

• Name your component file the same as the component, like Greeting.jsx for Greeting. It makes imports easy to read.
• Use the self-closing form <Greeting /> whenever the tag is empty. Keep the open-close form for when you actually put something inside.
• Keep one main component per file. It keeps your imports simple and your files easy to find.
• When a component refuses to appear, check the capital letter and the import path first. Those two cause most “nothing shows up” moments.

🧩 What You’ve Learned

✅ A component does nothing until you use it inside another component’s JSX.

✅ You bring a component into another file with import Greeting from "./Greeting", which relies on the file having an export.

✅ You use a component by writing it like a tag: <Greeting />.

✅ The self-closing form <Greeting /> is for empty components, and <Greeting></Greeting> is for when you put content inside.

✅ You can reuse the same component as many times as you like, and they all update together when you change the source.

✅ Custom component tags must start with a capital letter, or React treats them as plain HTML and they quietly fail.

🚀 What’s Next?

You can now place a single component and reuse it. The next step is putting components inside other components to build a real page out of small pieces.

Nesting React Components