React Introduction

// npx create-next-app@latest  ya  npx create-vite@latest

// JSX — JavaScript mein HTML-like syntax
function Welcome({ name, age }) {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
      {age >= 18 && <span>Adult ✓</span>}
    </div>
  );
}

// Component use karo
function App() {
  return (
    <div>
      <Welcome name="Zohaib" age={25} />
      <Welcome name="Ali" age={15} />
    </div>
  );
}

// Key concepts:
// - Components — reusable UI pieces
// - Props — data component mein dene ka tarika
// - JSX — HTML + JS combine
// - className — class ki jagah (reserved word)
// - {} — JS expressions embed karne ke liye

// Functional Component (modern way)
function Button({ children, onClick, variant = "primary", disabled = false }) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

// Conditional rendering
function Alert({ type, message }) {
  const icons = { success: "✅", error: "❌", warning: "⚠️" };
  
  return (
    <div className={`alert alert-${type}`}>
      {icons[type]} {message}
    </div>
  );
}

// Lists rendering
function UserList({ users }) {
  if (!users.length) return <p>No users found</p>;
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} — {user.email}</li>
      ))}
    </ul>
  );
}