🔍 What Are React Components?

React components are the core building blocks of every React application. Whether you’re creating a small personal website or a large-scale enterprise app, understanding components is the first and most important step in learning React.

A React component is an independent, reusable piece of UI. You can think of components like LEGO blocks—each block does one job, and when you combine them, you build a complete interface.

Each component is self-contained:

It knows how it should look
It controls how it should behave
It can be reused anywhere in the app

🤔 Why Use Components in React?

Instead of writing one large HTML file or mixing all logic in a single place, React encourages breaking the UI into small, manageable pieces.

✅ Benefits of Using Components

Reusability – Write once, reuse many times with different data
Maintainability – Easier to update or fix a small component
Readability – Code is cleaner and easier to understand
Scalability – Ideal for growing applications with new features
Team Collaboration – Multiple developers can work on different components

🧱 Types of React Components

React mainly supports two types of components:

Functional Components (modern & preferred)
Class Components (legacy, still supported)

1️⃣ Functional Components (Modern & Preferred)

Functional components are JavaScript functions that return JSX. With the introduction of Hooks, functional components can now handle state, lifecycle logic, and more—making them the default choice today.

✅ Basic Functional Component

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

✅ Using Props with Destructuring

const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

✅ Functional Component with State

import { 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>
    </>
  );
}

📌 Why functional components are preferred:

Less boilerplate code
Easier to test and debug
Supports Hooks (useState, useEffect, etc.)
Cleaner and more readable

2️⃣ Class Components (Legacy but Still in Use)

Before Hooks were introduced, class components were required to manage state and lifecycle methods. They use ES6 class syntax.

🏛️ Class Component Example

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

🏛️ Class Component with State

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Click Me</button>
      </>
    );
  }
}

⚠️ Class components are still supported, but not recommended for new projects.

📦 Understanding Props in Components

Props (properties) are how data is passed from a parent component to a child component. Props make components reusable and dynamic.

🔧 Props Example

function Greeting(props) {
  return <h2>Welcome, {props.user}!</h2>;
}

function App() {
  return <Greeting user="Rahul" />;
}

📌 Key points about props:

Props are read-only
A child component cannot modify props
Props help customize component behavior

🌲 Nesting Components to Build UI

React allows components to be nested inside other components, forming a tree-like structure.

🔧 Example: Nested Components

function Header() {
  return <h1>My App</h1>;
}

function Content() {
  return <p>This is the homepage content.</p>;
}

function App() {
  return (
    <>
      <Header />
      <Content />
    </>
  );
}

This approach helps structure your app into logical sections like headers, footers, sidebars, and pages.

🔁 Reusability in Action

One of the biggest strengths of React components is reusability.

🔧 Reusable Button Component

function Button({ label }) {
  return <button>{label}</button>;
}

// Usage
<Button label="Save" />
<Button label="Cancel" />

Here, the same component behaves differently based on the props passed.

💡 Best Practices for React Components

Keep components small and focused
Prefer functional components over class components
Use props for configuration and state for dynamic behavior
Split large components into smaller reusable ones
Name components clearly and meaningfully

🧠 Final Thoughts

React components are the foundation of React development.

To summarize:

Components are independent, reusable UI units
Functional components are the modern standard
Props allow data to flow between components
Components can be nested to build complex UIs
Reusability makes apps scalable and maintainable

Start small. Build one component. Reuse it. Improve it.
That’s how powerful React applications are built—one component at a time 🚀

What Are React Components? A Beginner’s Guide