Como obtener datos de un Excel con React

En este nuevo post os indicare como poder obtener los datos de un archivo Excel (.xlsx) con React. Lo primero es crear nuestro proyecto de React, en este caso yo usaré el comando npx create-react-app. https://flic.kr/p/2pifUwg Una vez tengamos nuestro proyecto creado correctamente, crearemos nuestro componente donde vamos a obtener los datos de nuestro Excel. En este caso yo he decidido llamarlo ExcelComponent.jsx, tú puedes darle el nombre que veas oportuno. https://flic.kr/p/2pihzkp Ahora tendremos que importar nuestro componente dentro de App.js para poder visualizarlo en nuestra aplicación y nos debería quedar tal que…continue reading →

Chakra UI en React

Chakra UI Chakra UI es una biblioteca de componentes sencilla, modular y accesible que nos proporciona bloques de construcción muy buenos para nuestros proyectos de React. Para empezar comenzaremos con la instalación de Chakra UI, en nuestro cmd tras crear un proyecto de React : https://www.flickr.com/photos/199600759@N03/53359944489/in/dateposted-public/ Nos introduciremos en el proyecto y descargaremos la librería de Chakra UI: https://www.flickr.com/photos/199600759@N03/53359619786/in/dateposted-public/ Tras descargarla dentro de nuestro proyecto de react en visual studio code o el editor de código que uses nos introduciremos en index.js para modificar el código. Lo primero que haremos dentro de index.js…continue reading →

Animations y Transitions en Vue

https://youtu.be/igM-7eIiT2E Presentación del Problema Imaginemos que estamos desarrollando una aplicación Vue que muestra una lista de tareas. Queremos mejorar la experiencia del usuario al agregar animaciones al agregar o eliminar tareas de la lista. Este es nuestro desafío: implementar animaciones y transiciones de manera efectiva en este contexto específico. Puntos Importantes a Considerar En nuestro caso, los puntos clave son la diferenciación entre animaciones y transiciones. Optaremos por usar transiciones para las adiciones y eliminaciones de tareas, ya que queremos efectos suaves en lugar de animaciones más complejas. Cómo Abordaremos la Solución Nuestra…continue reading →

Dockerizar App React

Equipo  Las características con el equipo que estamos usando seria:  Sistema Operativo: Windows   Versión: Windows 10  Memoria RAM: 16GB  Objetivo  EL objetivo principal es Dockerizar una app React , ya sea proyecto nuevo o personalizado. En el proceso veremos tipos de errores que nos pueden salir y como solucionarlo.  Pasos  Instalación Docker  El primer paso es instalar Docker Desktop para WIndows , ya que nosotros estamos usando este sistema operativo.  Usamos el siguiente link para descargarlo:  https://docs.docker.com/desktop/install/windows-install/  Una vez estemos en la página daremos click en el botón "Docker Desktop for Windows".   https://www.flickr.com/photos/199665078@N08/53357569416/in/datetaken/…continue reading →

Funcionamiento y construcción de Filtros Personalizados de Pipes de Angular

https://youtu.be/qfYyT4qsyfs En este post vamos a aprender cómo realizar transformaciones de datos desde los documentos HTML con las pipes. Angular proporciona una variedad de pipes incorporados, y también puedes crear tus propios pipes personalizados. 1, primero vamos a crear un fichero llamamos viaje.model.ts, es para instanciar objetos de la clase Viaje, representando viajes. 2, una datasource que carga y salva datos a un server crearemos un fichero llamamos datasource.model.ts Dentro del proyecto hay una carpeta "assets",aquí almaceno las imagenes. 3, Para mostrar la información de la tabla y el formulario, he creado un…continue reading →

ANGULAR+PRIMENG 2023

En este post se va a enseñar como utilizar la librería de componentes PrimeNG. Esta librería ofrece una variedad de componentes como tablas, formularios y menús con un diseño atractivo y una funcionalidad mejorada. Instalar dependencias Primero necesitas ejecutar los comandos de instalación en tu proyecto. A parte de PrimeNG y PrimeIcons (Librería opcional) añadiremos también PrimeFlex que es una librería de estilos css muy parecida a Bootstrap y compatible con PrimeNG, la razón para añadir esta librería es que Bootstrap sobrescribe los estilo de algunos componentes de PrimeNG obligándonos a retocarlos manualmente…continue reading →