Understanding React Components

What are Components?

A Component in React is a reusable and independent piece of UI. They help in breaking the DOM into smaller, manageable parts.

Types of Components

• Functional Components: Simple functions returning JSX.
• Class Components: ES6 classes extending React.Component (less used now after Hooks).

Example - Functional Component

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

Example - Class Component

  class Greeting extends React.Component {
    render() {
      return <h1>Hello, React!</h1>;
    }
  }
  

Why Use Components?

• Reusability
• Maintainability
• Separation of concerns (logic, structure, styling)

When to Use?

• Creating UI elements like buttons, forms, navigation bars
• Building reusable layouts (headers, footers)

Props in Components

Components receive data via props (short for properties):

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

  <Welcome name="Kapil" />
  

State in Components

Components can also have their own state (data that changes over time):

  import { useState } from 'react';

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

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

Important Notes:

• Component names must start with an uppercase letter.
• They return JSX.
• They can be nested (Component inside Component).

Use Cases

• Reusable UI widgets
• Forms and inputs
• Application layout (Header, Sidebar, Footer)
• Handling user interaction (Buttons, Modals)

Conclusion

Components make building and maintaining large React applications easier by breaking the UI into small, independent pieces that can be composed together.