⚛️ React Components

A component is a reusable piece of UI in React.
Components make it easy to split the UI into independent, reusable parts, and think about each part in isolation.

 Types of React Components

1. Functional Components (Modern & Recommended)

2. Class Components (Older, but still used)

1️⃣ Functional Components

A functional component is a JavaScript function that returns JSX.

Or using arrow function syntax:

✅ Modern React recommends functional components with hooks for state and lifecycle.

2️⃣ Class Components

A class component is a JS class that extends React.Component.

• Must have a render() method

• Can have state and lifecycle methods

• Less common in modern React (hooks replaced most use cases)

 Using Components

You can import and use components in other components.

• Components can be reused multiple times.

• Component names must start with a capital letter.

 Components with Props

Components can accept data from the parent via props.

 Components with State (Functional + Hooks)

• useState allows functional components to manage state

• Replaces the need for most class components

Component Nesting

Components can contain other components:

Component Lifecycle (Class Components)

Class components have lifecycle methods, like:

Functional components use hooks (useEffect) for similar purposes.

🎯 Summary

• Components = reusable UI blocks

• Functional components are modern standard

• Class components are older but still supported

• Props pass data from parent to child

• State stores internal component data

• Components can be nested to build complex UIs