What are React components?

In React, a component is basically a reusable building block of UI.
It’s a JavaScript function or class that returns JSX (JavaScript XML), which describes how a part of the user interface should look and behave.

Key Points:

1. Reusable – You can use a component in multiple places without rewriting code.
2. Independent – Each component manages its own structure, logic, and style.
3. Composable – Components can be combined together to build complex UIs.
4. Maintainable – Helps keep code modular, clean, and easier to debug.

Types of Components in React

Functional Components (Modern & Preferred)

• A simple JavaScript function that returns JSX.Can use React Hooks (like useState, useEffect) for state and lifecycle.

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

Class Components (Older way)

• Defined using ES6 classes.Use this.state and lifecycle methods (componentDidMount, etc.).

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

Example: Composing Components

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

function Footer() {
  return <p>© 2025 My Company</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome to my site!</p>
      <Footer />
    </div>
  );
}

Here, App is made up of Header and Footer components.

✅ In short:
React components are the heart of React development – they let you split the UI into independent, reusable parts that can be managed and updated easily.