React Components

React Components

React unfolds like a carefully composed system, where every visual element is shaped through small, meaningful units known as components. These components are not merely pieces of code; they are self-contained ideas, each responsible for a distinct part of the interface. When brought together, they create applications that feel both structured and alive.

Watch Tutorial  PDF Note

What is a React Component?

A React component is a reusable, independent piece of the user interface that defines how a specific part of the screen should appear.

To understand it more deeply, imagine a webpage not as a single entity, but as a collection of smaller elements working together. A navigation bar guiding the user, a footer closing the experience, a sidebar offering direction, and a content area delivering value — each can be shaped as its own component.

Example: Basic Component Structure

function Navbar() {
    return <h2>This is the Navbar</h2>;
}

function Footer() {
    return <p>This is the Footer</p>;
}

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

Here, each component plays its role independently, yet together they form a complete interface.

Types of React Components

1. Functional Components

Functional components are written as simple JavaScript functions. They are elegant in their design and widely used in modern React development.

function Welcome() {
    return <h1>Hello, Welcome to React!</h1>;
}

They can also accept inputs (called props) to make them dynamic:

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

// Usage
function App() {
    return <Greeting name="Rahat" />;
}

This ability to adapt based on input makes functional components highly reusable.

2. Class Components

Class components follow a more structured approach using ES6 classes. They include a render method that returns the UI.

class Welcome extends React.Component {
    render() {
        return <h1>Hello from Class Component</h1>;
    }
}

They can also receive props:

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

// Usage
function App() {
    return <Greeting name="Rahat" />;
}

While still functional, class components represent an earlier style of writing React applications.

Functional vs Class Components

Why Components are Important?

Components bring order to complexity. Instead of managing a large block of code, developers work with smaller, focused pieces.

Example: Reusability

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

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

A single component is reused multiple times, reducing repetition and effort.

They also improve readability and organization, allowing each part of the interface to be understood in isolation.

Component Lifecycle

Every component follows a journey from creation to removal.

Example (Class Component Lifecycle)

class Demo extends React.Component {
    componentDidMount() {
        console.log("Component Mounted");
    }

    componentDidUpdate() {
        console.log("Component Updated");
    }

    componentWillUnmount() {
        console.log("Component Unmounted");
    }

    render() {
        return <h2>Lifecycle Example</h2>;
    }
}

• When the component appears, it is mounted
• When data changes, it updates
• When removed, it unmounts

These stages help manage behavior over time.

Best Practices

Good components are crafted with intention and clarity.

Example:

function UserName() {
    return <h3>Rahat Hussain</h3>;
}

function UserProfile() {
    return (
        <div>
            <UserName />
            <p>Web Developer</p>
        </div>
    );
}

Here, the logic is divided into smaller parts, making it easier to manage.

Other guiding practices include:

• Using clear and meaningful names
• Reusing components wherever possible
• Keeping logic separate from UI

Advantages of React Components

The strength of components becomes evident as applications grow.

Example: Easy Debugging

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

function Content() {
    return <p>Main Content Area</p>;
}

If an issue arises in the content, it can be traced directly to the Content component without affecting the Header.

Components also:

• Encourage code reusability
• Improve performance through efficient updates
• Support scalable application design

Conclusion

React components form the foundation of every React application. By dividing the interface into small, meaningful pieces, they transform complexity into clarity.

With functional components as a starting point and continuous practice, the art of building interfaces becomes not just manageable, but deeply intuitive.

FAQs

1. What is a component in React?
A component is a reusable piece of UI that helps build web applications.

2. What is the difference between functional and class components?
Functional components are simple functions, while class components use ES6 classes and follow an older approach.

3. Why are components important?
They make code reusable, organized, and easier to maintain.

4. Can we reuse components?
Yes, components are designed to be reused multiple times.

C++