Gyakorlati példák

React komponens generálás, bug javítás, refaktorálás, TypeScript típus generálás Cursorral.

Gyakorlati példák

React komponens generálása

Feladat: Hozz létre egy újrafelhasználható PriceTag komponenst, amely valutaformátumot jelenít meg.

Prompt a Composerben:

Hozz létre egy PriceTag komponenst TypeScript-ben és Tailwind CSS-sel.
A komponens fogadjon egy `amount: number` és `currency: string` propot.
Formázza a számot a lokális valuta formátum szerint.
Legyen egy opcionális `size` prop: "sm" | "md" | "lg"
Helyezd el a components/ui/PriceTag.tsx fájlba.

Generált eredmény:

// components/ui/PriceTag.tsx

interface PriceTagProps {
  amount: number;
  currency: string;
  size?: 'sm' | 'md' | 'lg';
}

const sizeClasses = {
  sm: 'text-sm font-medium',
  md: 'text-base font-semibold',
  lg: 'text-2xl font-bold',
};

export function PriceTag({ amount, currency, size = 'md' }: PriceTagProps) {
  const formattedPrice = new Intl.NumberFormat('hu-HU', {
    style: 'currency',
    currency,
  }).format(amount);

  return (
    <span className={`text-foreground ${sizeClasses[size]}`}>
      {formattedPrice}
    </span>
  );
}

Bug azonosítása és javítása

Feladat: A kosárban lévő termékek összege nem frissül, amikor a felhasználó mennyiséget változtat.

Prompt:

@components/cart/CartSummary.tsx
@hooks/useCart.ts

A CartSummary komponensben az összeg nem frissül,
amikor a useCart hook-ban a quantity változik.
Azonosítsd a problémát és javítsd ki.

Tipikus hiba és javítás:

// HIBÁS – stale closure, az összeg nem reaktív
const total = cart.items.reduce((sum, item) => {
  return sum + item.price * quantity; // quantity nem a helyes forrásból jön
}, 0);

// HELYES – minden értéket az item objektumból olvasunk
const total = cart.items.reduce((sum, item) => {
  return sum + item.price * item.quantity;
}, 0);

Refaktorálás – logika kiszervezése

Feladat: A komponens túl sok logikát tartalmaz, szervezzük ki custom hook-ba.

Prompt:

@components/checkout/CheckoutForm.tsx

Ez a komponens túl sok logikát tartalmaz.
Szervezd ki az összes form logikát és validációt
egy useCheckoutForm nevű custom hook-ba.
A komponens csak a renderelésre fókuszáljon.

Eredmény előtte/utána:

// ELŐTTE – mindent egy komponens tartalmaz (100+ sor)
export function CheckoutForm() {
  const [step, setStep] = useState(0);
  const [formData, setFormData] = useState({});
  // ... 80 sor logika
  
  return <form>...</form>;
}

// UTÁNA – szétválasztott felelősségek
// hooks/useCheckoutForm.ts
export function useCheckoutForm() {
  const [step, setStep] = useState(0);
  // ... logika itt
  return { step, nextStep, prevStep, formData, handleSubmit };
}

// components/checkout/CheckoutForm.tsx
export function CheckoutForm() {
  const { step, nextStep, formData, handleSubmit } = useCheckoutForm();
  return <form onSubmit={handleSubmit}>...</form>;
}

TypeScript típus generálás API válaszból

Prompt:

Az alábbi API válasz alapján generálj TypeScript interfészeket.
Minden mező legyen megfelelően típusos, a nullable mezők
legyenek `| null` típussal jelölve.

{
  "id": 123,
  "name": "Példa termék",
  "price": 4990,
  "discount": null,
  "categories": ["elektronika", "laptop"],
  "inStock": true
}

Generált típusok:

interface Product {
  id: number;
  name: string;
  price: number;
  discount: number | null;
  categories: string[];
  inStock: boolean;
}

📝 Összefoglaló

A Composer ideális komponens generáláshoz, ha pontos instrukciót adsz
Bug javításnál mindig hivatkozz az érintett fájlokra @ segítségével
Refaktorálásnál mondd el a célt (pl. "custom hook"), ne csak a feladatot
TypeScript típusok generálhatók JSON példa alapján is

Gyakorlati példák