🚀 Learn Events, Functions & State in React

React ke basic concepts samjho jaise events, functions (with/without parameters), aur state management.

1️⃣ Simple Event (onClick)

Jab button pe click hota hai, `alert()` call hota hai. Yeh arrow function lagana zaroori hai warna function render ke waqt hi chal jata.

<button onClick={() => alert("Hello!")}>
  Event
</button>

2️⃣ Function Without Parameter

Yeh function bina kisi input ke sirf ek alert show karta hai.

const handleClick = () => {
  alert("Function chal gaya!");
}
<button onClick={handleClick}>
  Call Function
</button>

3️⃣ Function With Parameter

Jab hume function mein value pass karni hoti hai (jaise 'Zohaib'), toh hum onClick={() => handleClickWithParam('Zohaib')} likhtay hain. Agar direct likhein onClick={handleClickWithParam('Zohaib')}, toh wo render time pe immediately execute ho jata -- jo galat hai.

const handleClickWithParam = (name) => {
  alert("Hello " + name);
}

<button onClick={() => handleClickWithParam('Zohaib')}>
Pass Parameter
</button>

4️⃣ State Management (Counter)

React ka `useState` hook allow karta hai data ko dynamic banane mein. Har bar `setNumber()` se state update hoti hai, aur UI rerender hoti hai.
Jab hum useState use krty ha tu sb se upper 'use client' likhna pary ga, warna error show ho ga

📊 Counter: 0

const [number, setNumber] = useState(0);

<div>
  <p>{number}</p>
  <button onClick={() => setNumber(prev => prev + 1)}>➕</button>
  <button onClick={() => setNumber(prev => Math.max(0, prev - 1))}>➖</button>
</div>