React component

What is a Component in React?

In React, a component is a small, reusable piece of the UI — the building block of your app.

Think of it like this:

If your project were a car, its components would be

• Tyres
• Engine
• Doors
• Gearbox

Similarly, in a React project, your Header, Button, Footer, or Form Field can all be components.

Nested Components

A component can also contain other components inside it.

That’s called nesting.

Example:

A Form component may include smaller components like:

• Input
• Button

Each one handles its own part of the UI, and together they form the complete structure.

Role of Components in React

Every part of a React app is made using components.

They help you:

• Reuse the same UI multiple times
• Keep your code modular and clean
• Make your project easier to maintain and understand

Rules for Writing Components

1. Always start component names with a Capital Letter.
2. A component must return only one parent tag.
3. You can use a <div> or a <>...</> (React Fragment) to wrap multiple elements.

Example:

// Using Components like HTML tags
<Fruit />
<Color></Color>

How to Write Your First React Component

Inside your App.jsx, start with:

// App.jsx
function App() {
  return (
    <div>
      <h1>First Component</h1>
    </div>
  );
}

Now, let’s add a few more components to the same file:

// Fruit Component
function Fruit() {
  return <h1>Apple</h1>;
}

// Color Component
function Color() {
  return <h1>Red Color</h1>;
}

And use them inside your main App component:

// Using Components
function App() {
  return (
    <div>
      <h1>First Component</h1>
      <Fruit />        {/* Self-closing tag */}
      <Color></Color>  {/* Normal tag */}
    </div>
  );
}

Important Note

A React component must return a single parent tag.

You can’t return two HTML elements side by side like this:

// ❌ Invalid Example
return (
  <h1>Title</h1>
  <p>Description</p>
);

Instead, wrap them inside one tag:

// ✅ Correct Example
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

Component vs Normal Function

Final Thought

Once you understand components, React becomes much simpler.

It’s all about combining small, reusable pieces to build complete, dynamic UIs.