Cómo crear un carrito de compras con React paso a paso

Un carrito de compras es uno de los proyectos más útiles para aprender React porque permite practicar componentes, estado, eventos, listas, props y cálculos dinámicos. En este tutorial construiremos un carrito sencillo donde podremos agregar productos, aumentar o disminuir cantidades, eliminar productos y calcular el total automáticamente.

1. Crear el proyecto

Primero necesitamos crear una aplicación React con Vite:

npm create vite@latest carrito-react -- --template react
cd carrito-react
npm install
npm run dev

Después podemos organizar el proyecto de esta manera:

src/
├── components/
│   ├── ProductList.jsx
│   ├── ProductCard.jsx
│   └── Cart.jsx
├── App.jsx
└── index.css

Esta separación permite que cada componente tenga una responsabilidad específica.

2. Crear los productos

Podemos comenzar con un arreglo de productos dentro de App.jsx:

const productos = [
{
id: 1,
nombre: "Laptop",
precio: 2500000
},
{
id: 2,
nombre: "Mouse",
precio: 80000
},
{
id: 3,
nombre: "Teclado",
precio: 150000
}
];

Cada producto tiene un id, un nombre y un precio. Posteriormente podríamos obtener estos datos desde una API.

---

3. Crear el estado del carrito

Ahora utilizaremos useState para almacenar los productos que el usuario agrega:

import { useState } from "react";

function App() {
  const [carrito, setCarrito] = useState([]);

  return (
    <div>
      <h1>Mi tienda</h1>
    </div>
  );
}

Inicialmente el carrito está vacío.

---

4. Agregar productos

Creamos una función que agregue un producto al carrito:

const agregarAlCarrito = (producto) => {
  setCarrito([...carrito, producto]);
};

Luego mostramos nuestros productos:

{productos.map((producto) => (
  <div key={producto.id}>
    <h2>{producto.nombre}</h2>
    <p>${producto.precio}</p>

    <button onClick={() => agregarAlCarrito(producto)}>
      Agregar al carrito
    </button>
  </div>
))}

El método map() permite recorrer el arreglo y generar un elemento visual para cada producto.

---

5. Mostrar el carrito

Podemos recorrer el estado carrito para mostrar los productos seleccionados:

<h2>Carrito</h2>

{carrito.map((producto, index) => (
  <div key={index}>
    <span>{producto.nombre}</span>
    <span>${producto.precio}</span>
  </div>
))}

Cada vez que setCarrito() modifica el estado, React vuelve a renderizar automáticamente la interfaz.

---

6. Calcular el total

Una de las partes más importantes es calcular cuánto debe pagar el usuario:

const total = carrito.reduce(
  (acumulado, producto) => acumulado + producto.precio,
  0
);

reduce() recorre todos los productos y suma sus precios.

Después podemos mostrarlo:

<h2>Total: ${total}</h2>

7. Eliminar productos

También podemos crear una función para eliminar un producto:

const eliminarProducto = (id) => {
  setCarrito(
    carrito.filter((producto) => producto.id !== id)
  );
};

Y utilizarla:

<button onClick={() => eliminarProducto(producto.id)}>
  Eliminar
</button>

filter() crea un nuevo arreglo sin el producto seleccionado.

---

8. Mejorar el carrito con cantidades

En un carrito real, normalmente no queremos agregar el mismo producto varias veces. Podemos almacenar objetos con una cantidad:

{
id: 1,
nombre: "Laptop",
precio: 2500000,
cantidad: 1
}

Así podremos implementar botones + y −, controlar el stock y calcular:

Precio × cantidad

Por ejemplo, si una laptop cuesta $2.500.000 y tenemos 2 unidades:

$2.500.000 × 2 = $5.000.000

---

🚀 ¿Qué aprendemos con este proyecto?

Este pequeño proyecto permite practicar conceptos fundamentales de React:

• useState
• Componentes reutilizables
• Props
• Eventos con onClick
• Renderizado mediante map()
• Filtrado con filter()
• Cálculos con reduce()
• Actualización del estado
• Formularios y botones
• Organización de proyectos

Una vez terminado, puedes llevarlo mucho más lejos agregando imágenes de productos, buscador, categorías, cantidades, descuentos, localStorage, autenticación y una API REST. Incluso puedes conectarlo a un backend creado con .NET + SQL Server para convertirlo en una tienda online completa.