What Are Components in ReactJS? Explained with Examples

In this blog, we’ll break down ReactJS components, explore their types, and show you how to use them effectively with practical examples along the way. Whether you’re a student, a fresher, or a developer looking to sharpen your skills, you’ll leave with clarity and confidence.

What Is a Component in React?

In simple terms, a component in React is like a building block. You can think of it like a small part of a UI (User Interface) that you can reuse across your app.

Let’s take a website like YouTube. The header, the sidebar, the video player, and the comments section can all be treated as different components.

React lets you create these components independently and then combine them to build a full-fledged UI.

Why Use Components in React?

Here’s why components are a game-changer in modern development:

• Reusability – Write once, use anywhere.
• Separation of concerns – Each component does one job, making code easier to manage.
• Maintainability – Update one component without affecting others.
• Readability – Code becomes modular and easier to read.

 Types of Components in ReactJS

React offers two main types of components:

1. Functional Components

These are JavaScript functions that return JSX (JavaScript XML). They’re simpler, easier to test, and the most commonly used today especially with the rise of hooks.

function Welcome(props) {

  return <h1>Hello, {props.name}!</h1>;

}

2. Class Components

Before hooks were introduced, class components were used to manage state and lifecycle methods.

class Welcome extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}!</h1>;

  }

}

In modern React development, functional components with hooks are the standard.

 Reusability Example

You can reuse components like this:

function Button(props) {

  return <button>{props.label}</button>;

}

// Usage

<Button label="Login" />

<Button label="Signup" />

<Button label="Subscribe" />

Each button has a different label, but it’s the same component reused.

 Props in Components

Props (short for properties) are inputs you pass to components.

They allow you to customize the behavior or appearance of a component from outside.

function Greeting(props) {

  return <p>Good morning, {props.user}!</p>;

}

Usage:

<Greeting user="Muskan" />

This will render: Good morning, Muskan!

 State in Components

While props are read-only, state allows a component to manage and update its own data.

Example with hooks:

import React, { useState } from 'react';

function Counter() {

  const [count, setCount] = useState(0);

  return (

    <>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>Click Me</button>

    </>

  );

}

This is a functional component with internal state.

Components Can Be Nested

One component can contain other components this is known as composition.

function App() {

  return (

    <div>

      <Header />

      <MainContent />

      <Footer />

    </div>

  );

}

Each of Header, MainContent, and Footer can be its own component.

 Best Practices When Using Components

• Keep components small and focused on one job.
• Name components in PascalCase (e.g., UserCard, ProductList).
• Reuse components as much as possible.
• Use props to pass data and state to manage internal changes.
• Avoid deeply nested component hierarchies unless necessary.

 Real-Life Analogy

Think of a React app like a house.

Each room (bedroom, kitchen, living room) is a component.

Each room can have furniture (sub-components), and if you redesign one room, the rest of the house remains unaffected.

This modularity is what makes React scalable.

 Learn Components with Real Projects

If you’re serious about learning ReactJS and want to build real-world projects using components, Uncodemy’s ReactJS Course is a great place to start.

You’ll get:

• Hands-on training with real-time component development
• Deep dive into state, props, hooks, and JSX
• Project-based learning to build actual apps
• Support from industry-experienced mentors

Explore the course here: Uncodemy ReactJS Course

Final Thoughts

Components are the foundation of every React application. They make your code:

• Easier to manage
• More readable
• Highly reusable
• Scalable across large projects

As you continue your journey in React, mastering components will give you the confidence to build powerful, interactive UIs with less code and more control.

Stay consistent, keep building, and remember every expert React developer once started by building their first component.