PratViatges es construeix en 13 passos, cadascun amb una comprovació: crear el projecte amb Vite · netejar l'esquelet · tokens i estils globals · primer component (Peu) amb CSS Module · component amb props (Boto) · dades tipades · component que rep dades (TargetaDestinacio) · les pàgines · instal·lar React Router · taula de rutes · capçalera, Outlet i el canvi d'<a> a <Link> · ruta dinàmica amb useParams i 404 · revisió final amb npm run build.

Carpetes: src/components (peces reutilitzables i els seus .module.css), src/pagines (una per URL) i src/dades (les dades i els seus tipus).

Les props són els paràmetres del component. children és el que escrivim entre <Boto> i </Boto>.

import type { ReactNode } from 'react';
import estils from './Boto.module.css';

type Props = {
  children: ReactNode;
  variant?: 'primari' | 'secundari';
  onClick?: () => void;
};

export default function Boto({ children, variant = 'primari', onClick }: Props) {
  const classes =
    variant === 'secundari' ? `${estils.boto} ${estils.secundari}` : estils.boto;

  return (
    <button className={classes} onClick={onClick}>
      {children}
    </button>
  );
}

Les dades es declaren amb el seu type a src/dades. Cada targeta rep una destinació per props i no sap res de la resta de la llista.

export type Destinacio = { id: number; nom: string; pais: string; preu: number };

export function buscaDestinacio(id: number): Destinacio | undefined {
  return destinacions.find((d) => d.id === id);
}

// pagines/Destinacions.tsx
{destinacions.map((d) => (
  <TargetaDestinacio key={d.id} destinacio={d} />
))}