🧩 React Components

Components are the heart of React. They let you split the UI into reusable, isolated pieces. You can think of them as custom HTML elements that encapsulate logic and structure.

📦 Types of Components

• Function Components – Most common and concise. Written using functions.
• Class Components – Older approach using ES6 classes (less common now).

✅ Function Component Example

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

🏫 Class Component Example

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

📛 Naming and Return Rules

• Component names must start with a capital letter (MyComponent, not myComponent)
• Each component must return a single parent element
• Components can be reused like custom tags

🧱 Nesting Components

You can place components inside other components just like HTML elements:

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

🔁 Why Components Matter

• Encapsulate logic, style, and structure
• Promote reuse across the application
• Improve maintainability and scalability

✅ Summary

• Components are reusable building blocks in React
• Use function components for modern development
• Always return one parent element
• Use proper naming and nesting for clarity