Realiza un carrito de compras con React

El desarrollo de aplicaciones web se ha vuelto cada vez más popular, con React posicionándose como una de las bibliotecas más utilizadas para crear interfaces de usuario interactivas.

En este artículo, te enseñaré cómo realizar un carrito de compras utilizando React.

React es una de las principales plataformas para desarrollar aplicaciones web. Cuando se trata de crear un carrito de compras en una aplicación de comercio electrónico, React brinda muchas ventajas.

En primer lugar, React es altamente modular, es decir, se pueden construir componentes pequeños y reutilizables para ensamblarlos en aplicaciones completas de manera eficiente. Al crear un carrito de compras, esto significa que puede dividir la funcionalidad en pequeñas partes y combinarlas para crear un conjunto completo.

En segundo lugar, React utiliza el modelo de programación de un solo estado, lo que significa que toda la información necesaria para crear una aplicación está en un solo lugar. Esto hace que el manejo de información sea más fácil y permite actualizar la aplicación con más rapidez.

En tercer lugar, React tiene una integración perfecta con otras herramientas y bibliotecas de JavaScript, lo que significa que puede acceder a una amplia gama de recursos y tecnologías para mejorar la funcionalidad de su carrito de compras.

¿Qué es un carrito de compras?

Un carrito de compras es una funcionalidad común en las tiendas en línea que permite a los usuarios seleccionar productos y llevar un registro de los artículos que desean comprar. Es esencial para cualquier tienda en línea a efectos de brindar una experiencia fluida y rápida a los usuarios.

Como se muestra en la imagen, a la derecha aparece un panel con la cantidad y productos seleccionados por el usuario, además de tener el cálculo y el total a pagar.

Configuración del entorno

Para empezar, asegúrate de tener Node.js instalado en tu máquina y luego sigue estos pasos:

1) Crea un nuevo directorio para tu proyecto y ábrelo en tu terminal.

2) Ejecuta el siguiente comando para inicializar un nuevo proyecto de React:

npm create vite, seguidamente colocamos el nombre del proyecto, carrito-de-compras.

Uso de Vite

Vite es un comando que permite la creación rápida de un nuevo proyecto web con Vite como herramienta de construcción y empaquetado de aplicaciones. Vite es un framework de desarrollo de aplicaciones web modernas y potente que se enfoca en la velocidad y el rendimiento. Con npm create vite se pueden generar proyectos básicos de diferentes tecnologías como React, Vue, TypeScript, JavaScript y más, lo que facilita el inicio de un nuevo proyecto con Vite y evita la configuración inicial del proyecto.

Vite tiene varias características importantes que lo hacen adecuado para el desarrollo de aplicaciones web en React. Estas características incluyen una compilación instantánea, una capacidad de establecer una vista previa en tiempo real de los cambios realizados, soporte completo para hot reloading y una gran optimización de la carga para una rápida renderización de la aplicación.

Ahora que ya sabemos que es Vite, seleccionamos el framework React y la variante JavaScript + SW.

Una vez creado el proyecto, ingresa al directorio del proyecto:

cd carrito-de-compras

Ahora puedes instalar el proyecto con el siguiente comando:

npm install

Con el comando code podemos editar el proyecto. Luego abrimos una nueva terminal y copiamos npm run dev, así ejecutaremos la aplicación que hemos creado.

Si presionamos la tecla Ctrl y clic izquierdo sobre la línea Local  http://localhost:5173/, tendrás una aplicación React funcionando en tu navegador. Existe la posibilidad de que este puerto dé error, por lo que recomiendo modificar este código en el archivo vite.config.js.

Estructura del proyecto

Antes de desarrollar la funcionalidad del carrito de compras, es importante establecer una estructura de archivos organizada. A continuación, te muestro una estructura de archivos sugerida para este proyecto:

carrito-de-compras/

src/

components/

Header.js

ProductList.js

App.js

index.css

main.jsx

data.js

En esta estructura, hemos creado una carpeta components para almacenar nuestros componentes reutilizables. Además, hemos creado un archivo App.jsx que servirá como punto de entrada de nuestra aplicación y el archivo data.js para almacenar los datos de cada producto.

Creación del componente de cabecera Header.jsx

El componente Header.jsx es un elemento importante en nuestro carrito de compras, ya que proporciona la navegación y la información básica al usuario. Vamos a crear un componente simple de cabecera utilizando React. En el archivo Header.jsx podemos escribir el siguiente código:

En este código, hemos creado un componente de función Header que renderiza un encabezado con un título, ícono con la cantidad de productos seleccionados y contenedores con la información del producto (imagen, nombre, precio y un botón).

Creando el archivo data.js

El archivo data.js es responsable de mostrar la información de cada producto del carrito de compras en línea. Del mismo modo los archivos .js en React son archivos JavaScript que contienen código para definir componentes, manejar eventos y gestionar el estado de la aplicación. Por otro lado, estos archivos suelen ser utilizados en conjunto con otros archivos como los archivos .jsx (que permiten definir componentes utilizando la sintaxis de JSX).

En un archivo .js típico de React, puedes encontrar:

- La definición de un componente, que puede incluir propiedades (props) y estado (state).

- El manejo de eventos, que son funciones que se ejecutan cuando ciertas acciones ocurren en la aplicación.

- El renderizado de elementos HTML, que se hace utilizando la sintaxis de JSX.

De igual manera, React proporciona un conjunto de funciones y clases que facilitan el desarrollo de aplicaciones web complejas.

Continuamos con el archivo data.js, en el cual podemos escribir el siguiente código:

En este código, hemos creado un archivo llamado data que toma las propiedades id, img, nameProduct, price y quantity, donde la url o https de la imagen la podemos obtener desde un banco de fotos gratis, haciendo con clic derecho sobre la imagen seleccionada y buscamos la opción copiar dirección de imagen; esto evitará la descarga de imágenes en nuestro computador.

Creando el componente ProductList.jsx

Este componente es responsable de mostrar los productos seleccionados por el usuario y permitirle realizar acciones como añadir productos al carrito. En el archivo ProductList.jsx, podemos escribir el siguiente código:

En este código, hemos creado la función map, utilizada para recorrer un array y devolver uno nuevo con datos transformados. En este ejemplo, tenemos un array con los datos de los productos, en el cual podemos aplicar la función map para generar un nuevo array para mostrar los datos almacenados en el archivo data.js en la página web.

También en React, la función map es muy utilizada para construir listas con datos dinámicos. Por ejemplo, si tenemos un array de objetos que representan productos, podemos utilizar la función map para construir una lista de elementos HTML que muestran los detalles de cada producto.

Creando el archivo App.jsx

El archivo App.jsx es un archivo de React que contiene el componente principal de una aplicación basada en React. Este componente es el punto de partida de la aplicación y responsable de renderizar todos los demás componentes. En este archivo, se definen las propiedades y el estado del componente, así como los métodos y funciones necesarios para su funcionamiento. Además, se pueden importar otros componentes y librerías necesarias para la aplicación. El archivo App.jsx debe ser utilizado como una plantilla base para la creación de una aplicación en React y puede ser personalizado según las necesidades del proyecto.

En este archivo creamos una función llamada App, para establecer tres useState que determinarán (todos los productos, el total de la compra y la suma de todos los productos). Luego los utilizaremos en los componentes Header y ProductList.

UseState es un método que se utiliza en React para declarar estados en componentes funcionales. Con la ayuda de useState, los desarrolladores pueden actualizar el estado de un componente y React volverá a renderizar el componente con los nuevos datos. Asimismo, permite a los componentes funcionales tener estados locales y manejar los cambios en ellos, lo que se traduce en aplicaciones más dinámicas y escalables.

Función para agregar productos al carrito

La función find se utiliza para buscar un elemento dentro de un array en JavaScript. En React, se puede utilizar esta función para buscar un objeto específico dentro de un array de objetos.

En este paso, la función find busca un objeto en el array item que tenga un id igual al producto.id. Tiene como condición que, si el usuario presiona varias veces sobre un producto, éste debe mostrarse solo en una sola línea y sumar uno a la cantidad existente. Por otro lado, se realiza el cálculo del total de la compra, que consiste en sumar el total más la multiplicación del precio por la cantidad del producto.

Función para eliminar y vaciar el carrito

En React, la función filter se utiliza para filtrar elementos de un conjunto de datos. Esta función se puede utilizar para filtrar elementos de un array o para filtrar elementos de un objeto.

En este código, hemos creado una función onDeleteProduct para encontrar los elementos de cada producto según su id, para que cuando el usuario presione la X ese producto se elimine del carrito y se reste del total. Además, la función onCleanCart solo se activará cuando el usuario dé clic al botón vaciar carrito. De suceder lo anterior, el estado de todos los productos cambiará a vacío y el total y el contador de productos será cero.

En este artículo, hemos aprendido cómo realizar un carrito de compras utilizando React. Hemos creado componentes reutilizables para la cabecera, los productos y el carrito. Además,  exploramos las características principales de React y cómo podemos utilizarlas para crear una experiencia de compra interactiva y fluida.

¡Espero que hayas encontrado útil esta guía y que te sientas inspirado para crear tus propias aplicaciones de carrito de compras con React!