Proyecto importante: Control de gastos

Link: Control de Gastos

Este es un proyecto importante en el que convergen distintas aristas. Para empezar limpiamos nuestro proyecto para utilizar Tailwind en React, como las anteriores veces, instalamos Tailwind en el proyecto y una vez con esta librería de estilos, nos servirá de mucho para enfocarnos más en el funcionamiento de la página y no tanto en su CSS. También creamos el PostCSS config y el TailwindCSS config, las configuraciones predeterminadas de estas librerías, seteandolas.

De este proyecto mejoramos nuestras convenciones de escritura en React.

Este proyecto sobresale por el uso de reducers para las acciones, en especifico estas funciones cruciales en el funcionamiento de la web: Contiene presupuestos y gastos, filtra por categoría, edita los gastos y los elimina, resetea la aplicación. Así, los procedimientos de los reducers se alinean con los componentes en el archivo App.tsx.

También se aprende el uso de un manejador de estados globales. Para evitar estar pasando los props de state y dispatch a los componentes, se utiliza ContextAPI, que evita esta práctica. Así nos permite manejar un estado global, sin instalar dependencias (viene por defecto en React). Al definir el context, aprendemos a instanciarlo y definirlo con prácticas saludables y a utilizarlo con un provider (un prop que almacena los gastos) desde el return.

Para acceder facilmente al context y al reducer, creamo una función Hook, un facilitador para manejarlos y facilitar su llamada. De esta forma podemos llamar las acciones del reducer, desde el Hook, por medio del Context.

Le agregamos unos detalles que mejoran el funcionamiento y estética de la aplicación, para esto usamos diversas librerias, por ejemplo usamos HeroicIcons para los íconos y Headless UI para las ventanas emergentes.