React

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 →

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 →