PLANTA 6 · Sessió 6 · Activitat guiada PratLlibres

La biblioteca

Sistema a restaurar: Sala de proves (tot en verd)

Alerta
Manual
Reptes
Mòdul

pratshop://planta-6

Manual de la planta

0 / 3

Desbloqueja les 3 pàgines del manual per obrir els reptes. Llegeix-les bé: els reptes en pregunten els detalls.

PÀGINA 01

Una aplicació que ja funciona, amb forats

PratLlibres és un catàleg de llibres (React 19 + TypeScript + Vite) amb un cercador, preferits amb globus a la capçalera i un formulari d'opinió. Té 10 TODO d'una a tres línies i 10 proves de Vitest que els comproven.

npm run dev en una terminal, per veure l'aplicació.
npm test en una altra, per executar les proves: cada prova diu quin TODO comprova.
Es treballa de vermell a verd: fer un TODO, passar les proves, el següent.

PÀGINA 02

El que demanaven els TODO

TODO	Concepte
1 i 2 · Cataleg	`useState` del cercador i `onChange` del camp
3 · Cataleg	Condició del `filter`: títol o autor
4 · Cataleg	La `key` de cada element de la llista
5 · App	Afegir o treure un preferit sense mutar
6 · Capcalera	Globus amb el recompte: renderitzat condicional
7 · Opinio	Fer el camp «Títol del llibre» controlat
8 · Opinio	`preventDefault`, desar els errors i marcar l'enviament
9 · Cataleg	Missatge de llista buida
10 · App	`useEffect` + `localStorage`

PÀGINA 03

Dues eines per a tot el que queda

Renderitzat condicional. Per mostrar o amagar una part de la pantalla segons una condició:

{condicio && <Element />}: només si és certa.
{condicio ? <A /> : <B />}: una cosa o l'altra.

Alternar un element d'una llista sense mutar-la. Si hi és, se'n fa una de nova sense ell amb filter; si no hi és, una de nova amb ell al final amb l'spread.

{preferits.length > 0 && <span className="globus">{preferits.length}</span>}

setPreferits(
  preferits.includes(id)
    ? preferits.filter((x) => x !== id)
    : [...preferits, id],
);

Fragment	Què fa
`preferits.length > 0 && …`	El globus només es dibuixa si hi ha algun preferit.
`preferits.includes(id)`	Cert si l'id ja és a la llista.
`preferits.filter((x) => x !== id)`	Llista nova amb tots menys aquest id.
`[...preferits, id]`	Llista nova amb tots els d'abans i l'id al final.

PLANTA A LES FOSQUES

Manual de la planta