REACT Components Overview

Components are the building blocks of any React application. They allow you to break down your UI into smaller, reusable pieces, making your code modular, readable, and easier to maintain.

1. What Are React Components?

React components are independent, reusable pieces of UI. Each component is like a function that takes input (called “props”) and returns a React element describing what should appear on the screen.

2. Types of Components

React supports two main types of components:

1. Functional Components

Definition: Components written as JavaScript functions.
Characteristics: Simple and lightweight.

Example:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(<Greeting name="React Developer" />, document.getElementById('root'));

Try It Now

2. Class Components

Definition: Components written using ES6 classes.
Characteristics: Include lifecycle methods and state management (before hooks).
Example:

class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}
ReactDOM.render(<Greeting name="React Developer" />, document.getElementById('root'));

Try It Now

3. Anatomy of a React Component

Functional Component Example:

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

Try It Now

Class Component Example:

class Welcome extends React.Component {
    render() {
        return <h1>Welcome to React!</h1>;
    }
}

Try It Now

4. JSX in Components

React components typically use JSX to define their UI structure.

Example:

function Header() {
    return (
        <header>
            <h1>React Application</h1>
            <p>Building components is fun!</p>
        </header>
    );
}

Try It Now

5. Props (Properties)

Props are arguments passed into components to make them dynamic and reusable. They are immutable and allow data to flow from a parent to a child component.

Example:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

Try It Now

6. State in Components

State is a special object that allows components to store and manage data that changes over time.

Functional Components (with useState Hook):

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Try It Now

Class Components:

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

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

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

Try It Now

7. Nesting Components

You can nest components to create a hierarchical UI structure.

Example:

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

function Footer() {
    return <p>© 2025 React Tutorial</p>;
}

function App() {
    return (
        <div>
            <Header />
            <p>Welcome to the React tutorial!</p>
            <Footer />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

Try It Now

8. Lifecycle Methods (Class Components)

Lifecycle methods are functions that get called during different stages of a component’s life.

Mounting (when the component is added to the DOM):
- constructor()
- componentDidMount()
Updating (when props or state changes):
- componentDidUpdate()
Unmounting (when the component is removed from the DOM):
- componentWillUnmount()

Example:

class Timer extends React.Component {
    componentDidMount() {
        console.log('Component mounted');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
    }

    render() {
        return <h1>Timer Component</h1>;
    }
}

Try It Now

9. Functional Components with Hooks

Hooks allow functional components to use state and lifecycle methods.

useEffect Hook for Lifecycle Management:

import React, { useEffect } from 'react';

function Timer() {
    useEffect(() => {
        console.log('Component mounted');
        return () => console.log('Component will unmount');
    }, []);

    return <h1>Timer Component</h1>;
}

Try It Now

10. Component Communication

Components communicate using props and state:

Parent to Child (via Props):

function Parent() {
    return <Child message="Hello from Parent!" />;
}

function Child(props) {
    return <h1>{props.message}</h1>;
}

Try It Now

Child to Parent (via Callback Functions):

function Parent() {
    const handleCallback = (data) => {
        alert(data);
    };

    return <Child sendData={handleCallback} />;
}

function Child(props) {
    return <button onClick={() => props.sendData('Hello from Child!')}>Click Me</button>;
}

Try It Now

11. Best Practices for Components

Keep components small and focused on a single responsibility.
Use functional components with hooks for simplicity.
Use meaningful names for components and props.
Avoid deeply nested components; break them into smaller pieces.
Use PropTypes or TypeScript to define props for type safety.

12. Reusable Components

Design components that can be reused across your application by passing props.

Example:

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

// Reusing Button Component
<Button label="Click Me" onClick={() => alert('Clicked!')} />;

Try It Now

Key Points to Remember

Components are the heart of React applications.
Use functional components with hooks for modern React development.
Props are immutable and allow data to flow from parent to child.
State allows components to manage dynamic data.
Components can communicate via props and callback functions.

With React components, you can build complex UIs by combining smaller, reusable elements.