1. What is a Functional Component?

• A functional component is a JavaScript function that returns JSX (HTML-like syntax).
• It is used to create reusable UI elements in React.
• Unlike class components, functional components do not have their own this keyword.

📌 Example of a Simple Functional Component:

function Greeting() {
  return <h2>Hello, Welcome to React!</h2>;
}

2. Why Use Functional Components?

• ✅ Simpler and Cleaner Code: Easier to read and write.
• ✅ Better Performance: Uses less memory than class components.
• ✅ Hooks Support: Can use React Hooks (useState, useEffect, etc.).
• ✅ Easier Testing and Debugging.

3. Creating a Functional Component (Step by Step)

Step 1: Define a Functional Component

A functional component is simply a function that returns JSX.

📌 Example: Hello.js Functional Component

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

export default Hello;

Step 2: Import and Use in App.js

Now, use the Hello component inside App.js.

📌 Example: App.js

import Hello from "./Hello";  // Importing the component

function App() {
  return (
    <div>
      <Hello />  {/* Using the Hello component */}
    </div>
  );
}

export default App;

4. Functional Component with Props

Props (short for properties) allow you to pass data to functional components.

📌 Example: Functional Component with Props

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

Using Props in App.js

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome name="Zia" />  {/* Passing data as props */}
    </div>
  );
}

export default App;

5. Functional Component with useState (Using Hooks)

Functional components can use state with React Hooks like useState.

📌 Example: Counter Component Using useState

import { useState } from "react";

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

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

export default Counter;

import Counter from "./Counter";

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;