Proyecto: carrito de compras

1.Qué vas a construir

Vas a crear el carrito de compras de una tienda: un catálogo con buscador, un carrito donde se agregan, suman, restan y quitan productos, un total siempre correcto y el contenido guardado para que no se pierda al recargar. Es un proyecto pequeño, pero tiene la estructura de una aplicación real.

2.Plan: la arquitectura

El modelo de datos

// El carrito es un array de líneas:
[
  { id: 1, nombre: "Teclado", precio: 25,   categoria: "Periféricos", cantidad: 2 },
  { id: 2, nombre: "Mouse",   precio: 12.5, categoria: "Periféricos", cantidad: 1 },
]

// Y las acciones que lo cambian:
{ tipo: "agregar", producto }   // suma 1 si ya existe, o crea la línea
{ tipo: "sumar",   id }
{ tipo: "restar",  id }          // si llega a 0, la línea desaparece
{ tipo: "quitar",  id }

3.La estructura que esperan las pruebas

Para que tu proyecto y el comprobador se entiendan, usa estos elementos y nombres:

4.Paso a paso

Paso 1 · El catálogo

Con PRODUCTOS.map(...) dibuja un <article className="producto"> por producto. Usa key={p.id}. Aún sin carrito: los botones pueden no hacer nada.

Paso 2 · El buscador

Un campo controlado (busqueda) y una lista derivada: PRODUCTOS.filter(p => p.nombre.toLowerCase().includes(busqueda.toLowerCase())). No guardes la lista filtrada en estado.

Paso 3 · El reductor

function reductor(lineas, accion) {
  switch (accion.tipo) {
    case "agregar": /* si existe: cantidad + 1; si no: nueva línea con cantidad 1 */
    case "sumar":   /* map: cantidad + 1 en la línea con ese id */
    case "restar":  /* map: cantidad - 1 y filter: descarta las que lleguen a 0 */
    case "quitar":  /* filter: descarta la línea con ese id */
    default: return lineas;
  }
}

Cada caso debe devolver un array nuevo; nunca modifiques el existente.

Paso 4 · Contexto y proveedor

Crea CarritoContext fuera de los componentes. En CarritoProvider usa useReducer(reductor, [], leerGuardado), calcula total y unidades con reduce y ofrécelos junto a lineas y dispatch. Añade el hook useCarrito().

Paso 5 · El carrito

Lee { lineas, dispatch, total }. Si lineas.length === 0 muestra el mensaje de vacío; si no, una <ul className="lineas"> con las líneas y sus tres botones. Muestra el total con moneda(total).

Paso 6 · Persistencia

Dentro del proveedor, un efecto con [lineas] guarda JSON.stringify(lineas) en localStorage. La función leerGuardado (tercer argumento de useReducer) lo recupera al iniciar, con try/catch por si el dato estuviera dañado.

5.Revisión de calidad

6.Retos para ir más lejos

• Filtro por categoría: botones «Todas», «Periféricos» y «Pantallas».
• Cupón de descuento: un campo que aplique un 10 % si escribes REACT10.
• Envío gratis: muestra «Te faltan $X para el envío gratis» según el total.
• Ordenar el catálogo por precio o por nombre (recuerda copiar el array antes de sort).
• Productos desde una API: reemplaza PRODUCTOS por datos pedidos con el hook useDatos de la lección 10.
• Pasarlo a un proyecto de Vite, dividir los componentes en archivos y publicarlo en GitHub Pages (lección 11).

7.Qué sigue en tu camino

Has recorrido el camino del frontend: HTML para la estructura, CSS para el diseño, JavaScript para la lógica y React para construir aplicaciones. Lo que viene es el backend: guardar los datos de verdad en un servidor y una base de datos.

8.Errores frecuentes en el proyecto

• Mutar el estado en el reductor: lineas.push(…) o existe.cantidad++ rompen la actualización. Crea copias con map y filter.
• Guardar total en estado: se desincroniza. Calcúlalo con reduce.
• Olvidar .filter(l => l.cantidad > 0) al restar: quedan líneas con cantidad 0 o negativas.
• Duplicar líneas: al agregar, comprueba primero si el producto ya está.
• Leer localStorage en cada dibujo: usa el estado inicial perezoso (tercer argumento de useReducer).
• Olvidar la key en las listas de productos y de líneas.
• Dar formato en varios sitios: usa una sola función moneda(n).
• aria-label ausente en los botones «+» y «−».

9.Glosario