Creating React Components

In the last lesson you learned about React Functional Components and what they are. Now let’s actually build one in its own file, from the first line to the export.

🤔 Why Learn to Build a Component by Hand?

Reading about components is one thing. Sitting down with an empty file is another, right? Here’s the pain:

• You stare at a blank screen and don’t know what to type first.
• You know components matter, so that’s not the problem.
• It’s the actual steps that still feel fuzzy.

So here is the short version of what a component is:

• It’s just a function that returns some JSX. JSX is the HTML-like code you write inside React.
• You save it in a file so the rest of your app can use it.
• That’s really it. Once you do it once, you can do it a hundred times.

🧱 What a Component Really Is

Think of a component like a recipe card. It has a name at the top, a list of steps in the middle, and you can hand a copy to anyone in the kitchen. A React component works the same way: it has a name, it has the JSX it returns, and you export it so other files can grab a copy and use it.

Every component you write follows the same simple shape:

• It’s a function with a capital-letter name (PascalCase).
• It returns JSX wrapped in one single root element.
• It is exported so other files can import it.

Get those three things right and React is happy. Let’s build one step by step.

🛠️ Building a Component Step by Step

We’re going to make a small Greeting component that shows a welcome message. Follow along in your own editor, one step at a time.

📄 The Full File

Here is the complete Greeting.jsx file you just built, top to bottom:

export default function Greeting() {
  return (
    <div>
      <h1>Hello, welcome to React!</h1>
      <p>Glad to have you here.</p>
    </div>
  );
}

That’s a real, working component. When another file uses it, React shows this on the page:

Hello, welcome to React!
Glad to have you here.

✍️ A Slightly More Real Example

A welcome message is fine. But let’s make something you’d actually see in an app. Here is a small WelcomeCard that shows a name and a short line. It’s the kind of card you’d find at the top of a profile page.

export default function WelcomeCard() {
  const name = "Riya";
  const messageCount = 3;

  return (
    <div className="card">
      <h2>Welcome back, {name}!</h2>
      <p>You have {messageCount} new messages.</p>
    </div>
  );
}

Reading it from the top:

• We declare a normal variable, name, holding the text "Riya". We also add a messageCount variable set to 3.
• Inside the JSX we drop those variables in with curly braces, like {name} and {messageCount}. Those braces are how you put JavaScript values into JSX.
• We use className instead of class for styling. That’s because class is a reserved word in JavaScript, so React asks you to use className.
• Everything sits inside one <div className="card">, our single root element.

Same three rules as before. Capital name, one root element, and exported. You just added a couple of variables and a CSS class on top.

⚠️ Common Mistakes

A few small slips trip up almost everyone at the start. Watch for these.

• Lowercase component name. React treats a lowercase name as a plain HTML tag, so your component won’t render.

  // ❌ Avoid: React thinks this is an HTML tag
  function greeting() {
    return <h1>Hi</h1>;
  }
  
  // ✅ Good: capital letter marks it as a component
  function Greeting() {
    return <h1>Hi</h1>;
  }

• Returning two elements with no wrapper. A component returns one root element only. Two siblings with nothing around them is an error. Wrap them in a <div>, or use a Fragment with <>...</> if you don’t want an extra tag.

  // ❌ Avoid: two root elements, no wrapper
  function Greeting() {
    return (
      <h1>Hello</h1>
      <p>Welcome</p>
    );
  }
  
  // ✅ Good: one wrapper holds both
  function Greeting() {
    return (
      <div>
        <h1>Hello</h1>
        <p>Welcome</p>
      </div>
    );
  }

• Forgetting to export. If you skip export default, other files can’t import the component. You’ll get an error when you try to use it.

• Using class instead of className. In JSX you write className for CSS classes. Plain class won’t apply your styles.

✅ Best Practices

• Name the file the same as the component, like Greeting.jsx for Greeting. It makes files easy to find.
• Keep one component per file when you’re learning. One file, one job.
• Use export default for the main component of a file so the import line stays short and clear.
• Reach for the return (...) round brackets the moment your JSX spans more than one line. It keeps things readable.

🧩 What You’ve Learned

✅ A component is a PascalCase function that returns JSX and is exported.

✅ The name must start with a capital letter so React knows it’s a component, not an HTML tag.

✅ A component returns one single root element. Wrap multiple things in a <div>, or use a Fragment with <>...</>.

✅ export default lets other files import and use your component.

✅ Keep each component in its own file, named to match the component.

🚀 What’s Next?

You can build a component now. But a component sitting in a file doesn’t do much on its own. Next you’ll learn how to actually pull it into another file and put it on the screen.

Using React Components