React

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 →

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 →

Comparte datos entre componentes usando proveedores de contexto: Proveedor de Contexto con React

https://youtu.be/b5drVivxiOU El proveedor de contexto en React es una herramienta que permite compartir información entre componentes de manera fácil y sencilla. Con los proveedores de contexto, los componentes pueden acceder a datos y funciones desde un contexto compartido sin tener que pasar props manualmente a través de varios niveles de componentes. En este tutorial, aprenderás cómo usar los proveedores de contexto en React para compartir datos entre componentes sin problemas. En el desarrollo de aplicaciones con React, a menudo nos encontramos con la necesidad de compartir datos entre componentes que no están directamente…continue reading →

Profundizando en las Props de React con una aplicación de Redes Sociales

https://www.youtube.com/watch?v=GCETu0bH_kIEn este post, explicaré las diferentes facetas de las props utilizando una simulación de una aplicación de redes sociales como contexto. Veremos la sintaxis, los tipos de datos y los patrones de diseño que hacen que las props sean un componente fundamental en el desarrollo de aplicaciones React. Introducción a las Props en React En el desarrollo de aplicaciones React, la comunicación efectiva entre componentes es clave. Aquí es donde entran en juego las props (propiedades). Las props permiten la transferencia de datos desde un componente "padre" a un componente "hijo", creando así…continue reading →

Control de formularios en React con react-hook-form

En la rama de desarrollo de aplicaciones web, los formularios son una parte esencial para recopilar datos de los usuarios. En React, la gestión de formularios puede ser un proceso complejo debido al manejo del estado y a la actualización del DOM. Ahí es donde las bibliotecas como “react-hook-form” entran en juego para simplificar y optimizar este proceso. ¿Por qué he decidido elegir la librería “react-hook-form” en React para el control de formularios? Simplicidad y Claridad: react-hook-form proporciona una API sencilla y clara para gestionar formularios en React. La sintaxis concisa y la…continue reading →

Cómo leer y mostrar un excel en React

En esta sección os voy a enseñar como leer un archivo excel con sus múltiples hojas con React. Para ello vamos a usar una librería que nos permitirá leer el excel y usar sus métodos para manejar elfichero.Lo primero que debemos hacer es crear un proyecto en React Quitaremos el StrictMode para que no nos repita dos veces cada ejecución Lo primero que haremos será crear una carpeta components y dentro nuestro jsx llamado Excel (elnombre que tú quieras). Para mostrar los datos he usado Bootstrap, pero puedes usar la librería que tú…continue reading →