Beginner

// App.tsx
// => React component: TypeScript function returning JSX
// => Component names must start with capital letter (PascalCase)
function App() {
  // => Simplest component: no props, no state
  return (
    // => Must return single root element (here: div)
    <div>
      {/* => JSX: JavaScript XML syntax, compiles to React.createElement() */}
      <h1>Welcome to React</h1>
      {/* => Rendered as DOM <h1>Welcome to React</h1> */}

      <p>This is your first component.</p>
      {/* => Rendered as DOM <p>This is your first component.</p> */}
    </div>
    // => Alternative: use Fragment <> </> to avoid wrapper div
  );
}

// => Export for use in other files: import App from './App'
export default App;

// => .tsx file extension supports TypeScript + JSX syntax
function JsxDemo() {
  // => Variables re-created on every render
  const name = "Fatima";                    // => "Fatima" (inferred type: string)
  const age = 25;                            // => 25 (inferred type: number)
  const isStudent = true;                    // => true (inferred type: boolean)

  // => Template literal evaluated at render time
  const greeting = `Salam, ${name}!`;        // => "Salam, Fatima!"

  return (
    <div>
      {/* => Curly braces {} embed TypeScript expressions */}
      <h1>{greeting}</h1>
      {/* => Output: <h1>Salam, Fatima!</h1> */}

      <p>Age: {age}</p>
      {/* => Numbers auto-convert to strings. Output: <p>Age: 25</p> */}

      <p>Status: {isStudent ? "Student" : "Not Student"}</p>
      {/* => Ternary: isStudent is true → "Student" */}

      <p>Age in 5 years: {age + 5}</p>
      {/* => Arithmetic in JSX: 25 + 5 = 30 */}
    </div>
  );
}

export default JsxDemo;

// => Interface defines prop types - TypeScript validates at compile time
interface GreetingProps {
  name: string;                              // => Required prop (no ? optional marker)
  age: number;                               // => Number type enforced
  isStudent: boolean;                        // => Boolean type enforced
}

// => Props destructured with type annotation
// => Missing props cause compile-time error
function Greeting({ name, age, isStudent }: GreetingProps) {
  // => Props are read-only (immutable)
  // => Alternative syntax: function Greeting(props: GreetingProps)

  return (
    <div>
      <h2>Profile: {name}</h2>
      {/* => One-way data flow: parent → child */}

      <p>Age: {age}</p>
      {/* => Numbers auto-convert to strings */}

      <p>Status: {isStudent ? "Student" : "Professional"}</p>
      {/* => Conditional using prop value */}
    </div>
  );
}

// => Parent component controls child's props
function App() {
  return (
    <div>
      {/* => String props use quotes, number/boolean props use curly braces */}
      <Greeting name="Aisha" age={28} isStudent={false} />
      {/* => Props: { name: "Aisha", age: 28, isStudent: false } */}

      <Greeting name="Omar" age={22} isStudent={true} />
      {/* => Same component, different data (reusability) */}
    </div>
  );
}

export default App;

import { ReactNode } from 'react';          // => ReactNode: type for all renderable content

// => ReactNode accepts any valid JSX: elements, strings, numbers, arrays, fragments
interface CardProps {
  title: string;                             // => Card header text
  children: ReactNode;                       // => Content nested between <Card>...</Card>
                                             // => React automatically passes this special prop
}

// => Layout component providing consistent styling
function Card({ title, children }: CardProps) {
  return (
    // => Inline styles use object with camelCase properties
    <div style={{ border: '1px solid #ccc', padding: '16px', margin: '8px' }}>
      <h3>{title}</h3>
      {/* => title prop renders as header */}

      <div>
        {children}
        {/* => children renders whatever parent passed between tags */}
      </div>
    </div>
  );
}

// => Parent using Card with different children content
function App() {
  return (
    <div>
      <Card title="Zakat Information">
        {/* => Everything between <Card> and </Card> becomes children prop */}
        <p>Annual wealth threshold: 85g gold</p>
        <p>Rate: 2.5% of qualifying wealth</p>
        {/* => Two <p> elements passed as children */}
      </Card>

      <Card title="Prayer Times">
        {/* => Different content, same Card styling */}
        <ul>
          <li>Fajr: 5:30 AM</li>
          <li>Dhuhr: 12:45 PM</li>
        </ul>
        {/* => <ul> element with list items passed as children */}
        {/* => Card component handles any valid JSX */}
      </Card>
    </div>
  );
}

export default App;

// => Optional props use ? suffix
interface ButtonProps {
  text: string;                              // => Required: button label
  variant?: 'primary' | 'secondary';         // => Optional: union type literal
  disabled?: boolean;                        // => Optional: boolean
}

// => ES6 destructuring with default values for optional props
function Button({
  text,
  variant = 'primary',                       // => Defaults to 'primary'
  disabled = false                           // => Defaults to false
}: ButtonProps) {
  // => Compute styles based on variant
  const backgroundColor = variant === 'primary' ? '#0173B2' : '#DE8F05';
  // => primary: blue, secondary: orange

  const color = variant === 'primary' ? '#fff' : '#000';
  // => primary: white text, secondary: black text

  return (
    <button
      disabled={disabled}
      style={{ backgroundColor, color, padding: '8px 16px', border: 'none' }}
    >
      {text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Submit" />
      {/* => Uses defaults: variant='primary', disabled=false */}

      <Button text="Cancel" variant="secondary" />
      {/* => Overrides variant: orange button */}

      <Button text="Disabled" disabled={true} />
      {/* => Overrides disabled: grayed out */}
    </div>
  );
}

export default App;

import { useState } from 'react';           // => Hook for managing component state
                                             // => Must call in component body (not conditionals)

function Counter() {
  // => Returns tuple: [currentValue, setterFunction]
  const [count, setCount] = useState<number>(0);
  // => count is 0 initially (type: number)
  // => setCount triggers re-render with new value
  // => TypeScript infers number from initial value (could omit <number>)

  // => Event handler recreated each render
  const handleIncrement = () => {
    setCount(count + 1);                     // => count + 1: e.g., 0 + 1 = 1
    // => setCount schedules re-render (asynchronous)
    // => console.log(count) here shows OLD value (async update)
  };

  return (
    <div>
      <p>Count: {count}</p>
      {/* => Displays current state: "Count: 0", then "Count: 1", etc. */}

      <button onClick={handleIncrement}>Increment</button>
      {/* => onClick receives function reference (not call) */}
      {/* => Click → handleIncrement → setCount(1) → re-render → count = 1 */}
    </div>
  );
}

export default Counter;

import { useState } from 'react';

function DonationForm() {
  // => Separate useState for each independent value
  const [amount, setAmount] = useState<number>(0);
  // => amount: 0 (number)

  const [donorName, setDonorName] = useState<string>('');
  // => donorName: '' (string)

  const [isAnonymous, setIsAnonymous] = useState<boolean>(false);
  // => isAnonymous: false (boolean)

  // => Event handler converts string to number
  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setAmount(Number(e.target.value));       // => e.target.value: string → Number()
  };

  const handleSubmit = () => {
    console.log({ amount, donorName, isAnonymous });
    // => Example log: { amount: 100, donorName: "Fatima", isAnonymous: false }
  };

  return (
    <div>
      <input
        type="number"
        value={amount}
        {/* => Controlled input: state → UI */}
        onChange={handleAmountChange}
        placeholder="Amount"
      />

      <input
        type="text"
        value={donorName}
        onChange={(e) => setDonorName(e.target.value)}
        {/* => Inline handler */}
        placeholder="Donor Name"
      />

      <label>
        <input
          type="checkbox"
          checked={isAnonymous}
          onChange={(e) => setIsAnonymous(e.target.checked)}
          {/* => e.target.checked: boolean */}
        />
        Anonymous Donation
      </label>

      <button onClick={handleSubmit}>Submit Donation</button>
    </div>
  );
}

export default DonationForm;

import { useState } from 'react';

// => Type for user object
// => Define structure for state
interface User {
  name: string;                              // => User's full name
  email: string;                             // => Email address
  age: number;                               // => Age in years
}

function UserProfile() {
  // => State as object with explicit type
  // => Object state groups related values
  const [user, setUser] = useState<User>({
    name: 'Aisha',                           // => Initial name value
    email: 'aisha@example.com',              // => Initial email value
    age: 28                                  // => Initial age value
  });
  // => user is { name: 'Aisha', email: 'aisha@example.com', age: 28 }
  // => Single state variable for entire user object
  // => Alternative: 3 separate useState calls (less cohesive)

  // => Update single property immutably
  // => CRITICAL: Never mutate state directly (user.name = 'x' - WRONG)
  const updateName = (newName: string) => {
    setUser({ ...user, name: newName });     // => Spread operator creates new object
                                             // => {...user} copies all properties (shallow copy)
    // => ...user expands to: name: 'Aisha', email: 'aisha@example.com', age: 28
    // => name: newName overwrites name property with new value
    // => Result: { name: newName, email: 'aisha@example.com', age: 28 }
    // => New object triggers re-render, old object discarded
  };

  const updateEmail = (newEmail: string) => {
    setUser({ ...user, email: newEmail });   // => New object with updated email
                                             // => Spread preserves name and age
    // => Other properties (name, age) preserved from ...user
    // => Only email changes
  };

  const incrementAge = () => {
    setUser({ ...user, age: user.age + 1 }); // => New object with incremented age
                                             // => user.age reads current value (28)
                                             // => user.age + 1 computes new value (29)
    // => Computes new age, spreads other properties unchanged
    // => Creates entirely new object (immutable update pattern)
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      {/* => Access object property with dot notation */}
      {/* => Displays: "Name: Aisha" initially */}

      <p>Email: {user.email}</p>
      {/* => user.email reads email property */}

      <p>Age: {user.age}</p>
      {/* => user.age reads age property (number) */}

      <button onClick={() => updateName('Fatima')}>Change Name</button>
      {/* => Inline arrow function wraps call with parameter */}
      {/* => onClick expects function, not function call */}
      {/* => () => updateName('Fatima') creates function that calls updateName */}

      <button onClick={() => updateEmail('fatima@example.com')}>Change Email</button>
      {/* => Similar pattern: arrow function with parameter */}

      <button onClick={incrementAge}>Increment Age</button>
      {/* => Direct function reference (incrementAge takes no parameters) */}
      {/* => No arrow wrapper needed */}
    </div>
  );
}

export default UserProfile;

import { useState } from 'react';

// => Define structure for todo items
interface Todo {
  id: number;                                // => Unique identifier
  text: string;                              // => Description
  completed: boolean;                        // => Completion status
}

function TodoList() {
  // => State holds array of Todo objects
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: 'Pray Fajr', completed: true },
    { id: 2, text: 'Read Quran', completed: false }
  ]);
  // => Initial: [{ id: 1, text: 'Pray Fajr', completed: true }, { id: 2, ... }]

  // => Add new todo (immutable: spread operator)
  // => NEVER use push/splice - won't trigger re-render
  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: Date.now(),                        // => Unique ID (timestamp in ms)
      text,                                  // => ES6 shorthand for text: text
      completed: false                       // => New todos start uncompleted
    };
    // => newTodo: { id: 1234567890, text: "Study Fiqh", completed: false }

    setTodos([...todos, newTodo]);           // => [...todos, newTodo]: new array with added item
    // => Immutable update triggers re-render
  };

  // => Toggle completed status using map
  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo =>              // => map: immutable array transformation
      todo.id === id                         // => Find matching todo
        ? { ...todo, completed: !todo.completed }  // => Spread + flip completed
        : todo                               // => Keep other todos unchanged
    ));
    // => Returns new array with one modified object
  };

  // => Remove todo using filter
  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
    // => filter: new array excluding todo.id === id
  };

  return (
    <div>
      <ul>
        {/* => Map array to JSX list items */}
        {todos.map(todo => (
          <li key={todo.id}>
            {/* => key prop REQUIRED: unique, stable identifier for React reconciliation */}

            <input
              type="checkbox"
              checked={todo.completed}
              {/* => Controlled component: checked from state */}
              onChange={() => toggleTodo(todo.id)}
              {/* => Arrow function passes todo.id parameter */}
            />

            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {/* => Conditional styling: strike-through if completed */}
              {todo.text}
            </span>

            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>

      <button onClick={() => addTodo('Study Fiqh')}>Add Todo</button>
      {/* => Clicking adds new todo with text "Study Fiqh" */}
    </div>
  );
}

export default TodoList;

import { useState } from 'react';

function ZakatCalculator() {
  // => State for wealth amount
  const [wealth, setWealth] = useState<number>(0);
  // => wealth is 0 (type: number)

  // => WRONG: Closure problem
  // => Multiple rapid clicks may use stale wealth value
  const addWealthWrong = (amount: number) => {
    setWealth(wealth + amount);              // => Uses wealth from current render
    // => If clicked 3 times quickly, all 3 updates use same initial wealth
    // => Result: only increments once instead of three times
  };

  // => CORRECT: Functional update
  // => Guarantees correct value even with rapid updates
  const addWealthCorrect = (amount: number) => {
    setWealth(prevWealth => prevWealth + amount);
    // => prevWealth is latest state value from React
    // => Arrow function: (previous) => new
    // => React queues updates, applies in order
    // => Result: all 3 clicks accumulate correctly
  };

  // => Calculate Zakat (2.5% of wealth)
  const calculateZakat = () => {
    setWealth(prevWealth => prevWealth * 0.025);
    // => Functional update: multiply previous by 2.5%
    // => Ensures calculation uses latest wealth value
  };

  // => Reset to zero
  const reset = () => {
    setWealth(0);                            // => Direct value OK when not based on previous
    // => No need for functional update since not using previous state
  };

  return (
    <div>
      <p>Wealth: ${wealth.toFixed(2)}</p>
      {/* => toFixed(2) formats to 2 decimal places */}

      <button onClick={() => addWealthCorrect(1000)}>Add \$1000</button>
      {/* => Functional update handles rapid clicks correctly */}

      <button onClick={calculateZakat}>Calculate Zakat (2.5%)</button>
      {/* => Applies Zakat rate to current wealth */}

      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default ZakatCalculator;

import { useState, useEffect } from 'react';
// => useState: state management, useEffect: side effects

function DocumentTitleUpdater() {
  const [count, setCount] = useState<number>(0);
  // => count: 0 initially

  // => useEffect runs AFTER render completes
  // => Lifecycle: Render JSX → Update DOM → Run effects
  useEffect(() => {
    // => Effect phase: side effects allowed (DOM, network, timers)
    document.title = `Count: ${count}`;      // => Updates browser tab title
    // => Tab shows "Count: 0", then "Count: 1", etc.

    console.log('Effect ran with count:', count);
    // => Logs: "Effect ran with count: 0", then "Effect ran with count: 1"
  });
  // => No dependency array: runs after EVERY render (usually not ideal)

  return (
    <div>
      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* => Flow: click → setCount → re-render → effect runs */}
    </div>
  );
}

export default DocumentTitleUpdater;

import { useState, useEffect } from 'react';

function PrayerTimeAlert() {
  const [prayerTime, setPrayerTime] = useState<string>('Fajr');
  // => prayerTime is 'Fajr' initially

  const [alertMessage, setAlertMessage] = useState<string>('');
  // => alertMessage is '' initially

  // => Effect with dependency array
  // => Runs on mount AND when prayerTime changes
  useEffect(() => {
    console.log('Effect running because prayerTime changed to:', prayerTime);
    // => Logs on mount: "Effect running because prayerTime changed to: Fajr"
    // => Logs when changed: "Effect running because prayerTime changed to: Dhuhr"

    setAlertMessage(`Time for ${prayerTime} prayer!`);
    // => Updates alertMessage based on current prayerTime
    // => alertMessage becomes "Time for Fajr prayer!" on mount
  }, [prayerTime]);
  // => Dependency array: [prayerTime]
  // => Effect runs when prayerTime value changes
  // => Changing alertMessage does NOT re-run effect (not in dependencies)

  // => Effect with empty dependency array
  // => Runs ONLY on mount (component first appears)
  useEffect(() => {
    console.log('Component mounted - runs once');
    // => Logs exactly once when component first renders
    // => Never runs again, even after state updates
  }, []);
  // => Empty array: no dependencies to watch
  // => Equivalent to componentDidMount in class components

  return (
    <div>
      <p>{alertMessage}</p>
      {/* => Displays current alert message */}

      <button onClick={() => setPrayerTime('Dhuhr')}>Set Dhuhr</button>
      {/* => Changes prayerTime, triggers first effect */}

      <button onClick={() => setPrayerTime('Asr')}>Set Asr</button>
      {/* => Changes prayerTime, triggers first effect */}
    </div>
  );
}

export default PrayerTimeAlert;

import { useState, useEffect } from 'react';

function TimerComponent() {
  const [seconds, setSeconds] = useState<number>(0);
  // => seconds: 0, increments every second

  useEffect(() => {
    console.log('Setting up timer');
    // => Setup phase: create timer on mount

    // => setInterval: recurring timer (browser API)
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);          // => Functional update: prev → prev + 1
                                             // => Prevents stale closure, always uses latest value
      // => First run: 0 → 1, second run: 1 → 2, etc.
    }, 1000);
    // => Runs callback every 1000ms (1 second)
    // => intervalId: number (timer reference for cleanup)

    // => Cleanup function runs before next effect or on unmount
    return () => {
      console.log('Cleaning up timer');
      clearInterval(intervalId);             // => Stops timer, prevents memory leak
      // => Without cleanup: timer runs forever, setState on unmounted component (warning)
    };
  }, []);
  // => Empty array []: runs once on mount, cleanup once on unmount

  return (
    <div>
      <p>Timer: {seconds} seconds</p>
      {/* => Updates every second when setInterval calls setSeconds */}
    </div>
  );
}

// => Parent controls timer lifecycle
function App() {
  const [showTimer, setShowTimer] = useState<boolean>(true);
  // => Controls whether TimerComponent is mounted

  return (
    <div>
      <button onClick={() => setShowTimer(!showTimer)}>
        {/* => Toggles showTimer between true and false */}
        {/* => !showTimer flips boolean value */}
        {showTimer ? 'Hide' : 'Show'} Timer
        {/* => Conditional text: "Hide Timer" when true, "Show Timer" when false */}
      </button>

      {showTimer && <TimerComponent />}
      {/* => Conditional rendering with logical AND (&&) */}
      {/* => showTimer true: renders <TimerComponent /> */}
      {/* => showTimer false: renders nothing (component unmounts) */}
      {/* => When showTimer becomes false: cleanup runs, timer cleared */}
    </div>
  );
}

export default App;

import { useState, useEffect } from 'react';

// => Type for fetched user data
interface User {
  id: number;
  name: string;
  email: string;
}

function UserFetcher() {
  // => State for fetched data
  const [user, setUser] = useState<User | null>(null);
  // => user is null initially (data not loaded yet)
  // => Union type: User object or null

  // => State for loading indicator
  const [loading, setLoading] = useState<boolean>(true);
  // => loading is true initially (fetch in progress)

  // => State for error handling
  const [error, setError] = useState<string | null>(null);
  // => error is null initially (no error yet)

  useEffect(() => {
    // => Fetch data on mount
    console.log('Fetching user data...');

    fetch('https://jsonplaceholder.typicode.com/users/1')
    // => fetch returns Promise<Response>
    // => GET request to public API
      .then(response => response.json())     // => Parse JSON body
      // => response.json() returns Promise<any>
      .then((data: User) => {
        console.log('Fetch successful:', data);
        // => Logs fetched user object

        setUser(data);                       // => Store user in state
        // => Triggers re-render with user data
        setLoading(false);                   // => Hide loading indicator
        // => Triggers re-render showing user
      })
      .catch(err => {
        console.error('Fetch failed:', err);
        // => Logs error to console

        setError('Failed to fetch user data');
        // => Store error message in state
        setLoading(false);                   // => Hide loading indicator
        // => Show error message instead
      });
  }, []);
  // => Empty dependency array: fetch once on mount
  // => No cleanup needed (fetch can't be cancelled easily)

  // => Loading state
  if (loading) {
    return <div>Loading user data...</div>;
    // => Shows while fetch in progress
    // => Early return prevents rendering user data
  }

  // => Error state
  if (error) {
    return <div>Error: {error}</div>;
    // => Shows if fetch failed
    // => Displays error message to user
  }

  // => Success state
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user?.name}</p>
      {/* => Optional chaining (?) handles null case */}
      {/* => If user is null, expression returns undefined */}
      <p>Email: {user?.email}</p>
    </div>
  );
}

export default UserFetcher;

import { useState, useEffect } from 'react';

// => Type for Zakat calculation result
interface ZakatCalculation {
  wealth: number;                            // => Total wealth amount
  zakatAmount: number;                       // => Calculated zakat (2.5%)
  date: string;                              // => ISO timestamp
}

function ZakatHistory() {
  const [calculations, setCalculations] = useState<ZakatCalculation[]>([]);
  // => calculations: [] initially, filled after fetch

  const [loading, setLoading] = useState<boolean>(true);
  // => loading: true initially, false after fetch completes
  const [error, setError] = useState<string | null>(null);
  // => error: null initially, error message if fetch fails

  useEffect(() => {
    // => Define async function inside effect (can't make callback itself async)
    const fetchCalculations = async () => {
      try {
        console.log('Fetching Zakat calculations...');
        // => Log: "Fetching Zakat calculations..."

        // => await pauses execution until fetch completes
        const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
        // => response: Response object with status, headers, body
        // => _limit=3: fetch only 3 items

        if (!response.ok) {
          // => response.ok: true for 200-299, false otherwise
          throw new Error(`HTTP error! status: ${response.status}`);
          // => Throws for 4xx/5xx errors, caught by catch block
        }

        // => await pauses until JSON parsing completes
        const data = await response.json();
        // => data: parsed array of objects

        console.log('Fetch successful, received:', data.length, 'items');
        // => Log: "Fetch successful, received: 3 items"

        // => Transform API data to ZakatCalculation type
        const mapped: ZakatCalculation[] = data.map((item: any) => ({
          wealth: item.id * 10000,           // => Mock: id 1 → \$10000 wealth
          zakatAmount: item.id * 250,        // => Mock: 2.5% rate → id 1 → \$250
          date: new Date().toISOString()     // => Current timestamp in ISO format
        }));
        // => mapped: [{ wealth: 10000, zakatAmount: 250, date: "..." }, ...]

        setCalculations(mapped);             // => Update state with fetched data
        setLoading(false);                   // => Hide loading indicator

      } catch (err) {
        // => Catches fetch errors, network errors, or JSON parsing errors
        console.error('Error fetching calculations:', err);

        setError(err instanceof Error ? err.message : 'Unknown error');
        // => Type guard extracts message if Error, else fallback string
        setLoading(false);                   // => Hide loading even on error
      }
    };

    fetchCalculations();                     // => Invoke async function
    // => Returns Promise (not awaited - useEffect can't be async)
  }, []);
  // => []: runs once on mount

  if (loading) return <div>Loading calculations...</div>;
  // => Early return shows loading state
  if (error) return <div>Error: {error}</div>;
  // => Early return shows error state

  return (
    <div>
      <h2>Zakat Calculation History</h2>
      <ul>
        {calculations.map((calc, index) => (
          <li key={index}>
            {/* => Using index as key (OK here - static list, no reordering) */}
            Wealth: ${calc.wealth} → Zakat: ${calc.zakatAmount}
            {/* => Example output: "Wealth: $10000 → Zakat: $250" */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ZakatHistory;

import { useState } from 'react';

function DonationButton() {
  const [donations, setDonations] = useState<number>(0);
  // => donations is 0 initially

  // => Event handler with no parameters
  const handleDonation = () => {
    console.log('Donation button clicked');
    // => Logs to console on every click

    setDonations(prev => prev + 1);          // => Functional update
    // => Increments donation count
  };

  // => Event handler with event parameter
  // => React.MouseEvent<HTMLButtonElement> is synthetic event type
  const handleDonationWithEvent = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log('Button clicked at:', e.clientX, e.clientY);
    // => Logs mouse position relative to viewport
    // => e.clientX is horizontal position
    // => e.clientY is vertical position

    console.log('Button text:', e.currentTarget.textContent);
    // => e.currentTarget is button element that handler attached to
    // => textContent is button's text

    setDonations(prev => prev + 1);
  };

  // => Event handler with custom parameter
  const handleDonationAmount = (amount: number) => {
    console.log('Donating:', amount);
    // => Logs donation amount

    setDonations(prev => prev + amount);     // => Add specific amount
  };

  return (
    <div>
      <p>Total Donations: {donations}</p>

      <button onClick={handleDonation}>
        {/* => onClick expects function, not function call */}
        {/* => Correct: onClick={handleDonation} */}
        {/* => Wrong: onClick={handleDonation()} - calls immediately */}
        Donate \$1
      </button>

      <button onClick={handleDonationWithEvent}>
        Donate \$1 (with event)
      </button>

      <button onClick={() => handleDonationAmount(5)}>
        {/* => Inline arrow function to pass parameter */}
        {/* => Arrow function delays execution until click */}
        Donate \$5
      </button>

      <button onClick={() => handleDonationAmount(10)}>
        Donate \$10
      </button>
    </div>
  );
}

export default DonationButton;

import { useState } from 'react';

function RegistrationForm() {
  const [name, setName] = useState<string>('');
  const [email, setEmail] = useState<string>('');
  const [age, setAge] = useState<number>(0);

  // => Text input handler
  // => React.ChangeEvent<HTMLInputElement> for text inputs
  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log('Name changed to:', e.target.value);
    // => e.target is input element
    // => e.target.value is string (current input value)

    setName(e.target.value);                 // => Update state with input value
  };

  // => Inline handler for email
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);                // => Direct state update
    // => No need for separate function if just updating state
  };

  // => Number input handler
  const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Number(e.target.value);    // => Convert string to number
    // => Input values are always strings
    // => Number() converts to number type

    console.log('Age changed to:', value, 'Type:', typeof value);
    // => Logs: "Age changed to: 25 Type: number"

    setAge(value);                           // => Store as number
  };

  // => Textarea handler
  // => React.ChangeEvent<HTMLTextAreaElement> for textareas
  const [bio, setBio] = useState<string>('');
  const handleBioChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setBio(e.target.value);                  // => Same as input, different element type
    // => Synthetic event API consistent across element types
  };

  return (
    <form>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          {/* => Controlled input: value from state */}
          onChange={handleNameChange}
          {/* => onChange fires on every keystroke */}
        />
        {/* => Current value: {name} */}
      </div>

      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          {/* => Inline handler (no separate function) */}
        />
      </div>

      <div>
        <label>Age:</label>
        <input
          type="number"
          value={age}
          onChange={handleAgeChange}
          {/* => Number input still returns string value */}
        />
      </div>

      <div>
        <label>Bio:</label>
        <textarea
          value={bio}
          onChange={handleBioChange}
          {/* => textarea uses value prop (not children) */}
          rows={4}
        />
      </div>

      <p>Form Data: {JSON.stringify({ name, email, age, bio }, null, 2)}</p>
      {/* => Display current form state */}
    </form>
  );
}

export default RegistrationForm;

import { useState } from 'react';

function DonationAmountForm() {
  // => All input values stored in state
  const [amount, setAmount] = useState<number>(0);
  const [currency, setCurrency] = useState<string>('USD');
  const [recurring, setRecurring] = useState<boolean>(false);

  // => Number input handler with validation
  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Number(e.target.value);

    if (value < 0) {
      console.log('Negative amount rejected');
      return;                                // => Reject negative values
      // => State doesn't update, input shows previous value
    }

    setAmount(value);                        // => Accept non-negative values
  };

  // => Select dropdown handler
  // => React.ChangeEvent<HTMLSelectElement> for select elements
  const handleCurrencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    console.log('Currency changed to:', e.target.value);
    // => e.target.value is selected option value

    setCurrency(e.target.value);             // => Update currency state
  };

  // => Checkbox handler
  const handleRecurringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log('Recurring changed to:', e.target.checked);
    // => e.target.checked is boolean (not value)
    // => true when checked, false when unchecked

    setRecurring(e.target.checked);          // => Update boolean state
  };

  return (
    <form>
      <div>
        <label>Amount:</label>
        <input
          type="number"
          value={amount}
          {/* => value controlled by state */}
          {/* => React prevents typing that would violate state */}
          onChange={handleAmountChange}
          min="0"
          {/* => HTML validation attribute (additional check) */}
        />
      </div>

      <div>
        <label>Currency:</label>
        <select value={currency} onChange={handleCurrencyChange}>
          {/* => value prop on select (not option) */}
          {/* => Controls which option selected */}
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="IDR">IDR</option>
          {/* => option values match state values */}
        </select>
      </div>

      <div>
        <label>
          <input
            type="checkbox"
            checked={recurring}
            {/* => checked prop (not value) for checkboxes */}
            {/* => Controls checkbox state */}
            onChange={handleRecurringChange}
          />
          Recurring Monthly Donation
        </label>
      </div>

      <p>
        You are donating: {amount} {currency}
        {recurring ? ' monthly' : ' one-time'}
      </p>
    </form>
  );
}

export default DonationAmountForm;

import { useState } from 'react';

// => Define structure for all form fields
interface DonationFormData {
  donorName: string;                         // => Donor's name
  amount: number;                            // => Donation amount
  message: string;                           // => Optional message
}

function DonationSubmitForm() {
  // => Store all form fields in single state object
  const [formData, setFormData] = useState<DonationFormData>({
    donorName: '',                           // => Initial values: empty string
    amount: 0,                               // => Initial: zero
    message: ''
  });
  // => Initial state: { donorName: '', amount: 0, message: '' }

  const [submitted, setSubmitted] = useState<boolean>(false);
  // => Tracks submission status
  const [submittedData, setSubmittedData] = useState<DonationFormData | null>(null);
  // => Stores submitted values (null until submitted)

  // => Generic handler for all inputs (reduces code duplication)
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;        // => Destructure: name attribute & current value
                                             // => value is always string from DOM

    setFormData(prev => ({
      ...prev,                               // => Spread preserves unchanged fields
      [name]: name === 'amount' ? Number(value) : value
      // => Computed property: uses name to update correct field
      // => Convert amount to number, keep others as string
    }));
  };

  // => Form submit handler
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();                      // => CRITICAL: prevents page refresh
    // => Without this, all React state would be lost

    console.log('Form submitted:', formData);
    // => Log: { donorName: "Fatima", amount: 100, message: "..." }

    // => Client-side validation (also validate on server)
    if (formData.amount <= 0) {
      alert('Amount must be greater than 0');
      return;                                // => Early return stops invalid submission
    }

    if (formData.donorName.trim() === '') {
      // => .trim() prevents submitting whitespace
      alert('Name is required');
      return;
    }

    // => Process valid submission
    setSubmittedData(formData);              // => Preserve data for display
    setSubmitted(true);                      // => Show success message

    // => Reset form for next donation
    setFormData({ donorName: '', amount: 0, message: '' });
    // => Controlled inputs sync with reset state
  };

  // => Conditional render: success message
  if (submitted && submittedData) {
    return (
      <div>
        <h2>Thank you for your donation!</h2>
        <p>Donor: {submittedData.donorName}</p>
        <p>Amount: ${submittedData.amount}</p>
        <p>Message: {submittedData.message}</p>
        <button onClick={() => setSubmitted(false)}>Make Another Donation</button>
      </div>
    );
  }

  // => Render form (default state)
  return (
    <form onSubmit={handleSubmit}>
      {/* => onSubmit on form (not button) - triggered by submit button or Enter key */}

      <div>
        <label>Donor Name:</label>
        <input
          type="text"
          name="donorName"
          {/* => name attribute matches state property (handleChange uses this) */}
          value={formData.donorName}
          onChange={handleChange}
          required
        />
      </div>

      <div>
        <label>Amount ($):</label>
        <input
          type="number"
          name="amount"
          value={formData.amount}
          onChange={handleChange}
          required
        />
      </div>

      <div>
        <label>Message (optional):</label>
        <textarea
          name="message"
          value={formData.message}
          {/* => textarea uses value prop (not children) */}
          onChange={handleChange}
          rows={3}
        />
      </div>

      <button type="submit">Submit Donation</button>
      {/* => type="submit" triggers form onSubmit event */}
    </form>
  );
}

export default DonationSubmitForm;

import { useState } from 'react';

// => Type for validation errors
interface FormErrors {
  email?: string;                            // => Optional: only exists if error
  age?: string;
}

function ValidatedRegistrationForm() {
  const [email, setEmail] = useState<string>('');
  // => email: '', updated on input change
  const [age, setAge] = useState<number>(0);
  // => age: 0, updated on input change
  const [errors, setErrors] = useState<FormErrors>({});
  // => errors: {}, populated with error messages on validation

  // => Validation function for email
  const validateEmail = (value: string): string | undefined => {
    if (value.trim() === '') {
      // => .trim() removes whitespace
      return 'Email is required';            // => Returns error message string
    }

    // => Simple email regex: anything@anything.anything
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      // => .test() returns true if match, false otherwise
      return 'Invalid email format';
    }

    return undefined;                        // => No error: valid email
  };

  // => Validation function for age
  const validateAge = (value: number): string | undefined => {
    if (value < 13) {
      return 'Must be at least 13 years old';
    }

    if (value > 120) {
      return 'Invalid age';
    }

    return undefined;                        // => No error: valid age
  };

  // => Email change handler clears error on typing
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;            // => Current input value
    setEmail(value);                         // => Update email state

    // => Clear error when user starts typing (better UX)
    setErrors(prev => ({ ...prev, email: undefined }));
    // => Spread preserves age error if it exists
  };

  // => Email blur handler validates when focus lost
  const handleEmailBlur = () => {
    const error = validateEmail(email);      // => Validate current email value
    // => error: undefined (valid) or string (invalid)
    setErrors(prev => ({ ...prev, email: error }));
    // => Update email error, preserve age error
  };

  // => Age change handler clears error
  const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Number(e.target.value);    // => Convert string to number
    setAge(value);                           // => Update age state
    setErrors(prev => ({ ...prev, age: undefined }));
    // => Clear age error on change
  };

  // => Age blur handler validates when focus lost
  const handleAgeBlur = () => {
    const error = validateAge(age);          // => Validate current age value
    setErrors(prev => ({ ...prev, age: error }));
    // => Update age error, preserve email error
  };

  // => Form submit handler validates all fields
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();                      // => Prevent page refresh

    // => Validate all fields before submission
    const emailError = validateEmail(email);
    // => emailError: undefined or error string
    const ageError = validateAge(age);
    // => ageError: undefined or error string

    // => Update errors object with validation results
    setErrors({
      email: emailError,                     // => Set email error (or undefined)
      age: ageError                          // => Set age error (or undefined)
    });

    // => Check if any errors exist
    if (emailError || ageError) {
      // => Truthy check: undefined is falsy, string is truthy
      console.log('Form has validation errors');
      return;                                // => Stop submission if invalid
    }

    // => All validation passed (both undefined)
    console.log('Form submitted successfully:', { email, age });
    // => Log: { email: "test@example.com", age: 25 }
    alert('Registration successful!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          onBlur={handleEmailBlur}
          {/* => onBlur fires when input loses focus */}
          style={{ borderColor: errors.email ? 'red' : undefined }}
          {/* => Red border if error exists */}
        />
        {errors.email && (
          <p style={{ color: 'red', fontSize: '0.875rem' }}>
            {errors.email}
            {/* => Conditional rendering: only show if error exists */}
          </p>
        )}
      </div>

      <div>
        <label>Age:</label>
        <input
          type="number"
          value={age}
          onChange={handleAgeChange}
          onBlur={handleAgeBlur}
          style={{ borderColor: errors.age ? 'red' : undefined }}
        />
        {errors.age && (
          <p style={{ color: 'red', fontSize: '0.875rem' }}>
            {errors.age}
          </p>
        )}
      </div>

      <button type="submit">Register</button>
    </form>
  );
}

export default ValidatedRegistrationForm;