React

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 →

Funcionamiento de Props en React de una aplicación de contactos

Los Props se refieren a las propiedades las cuales cumplen un rol importante en el proceso de desarrollo de una aplicación o página web. Los componentes son los bloques de construcción de React y estos componentes usan Props para mejorar su funcionalidad y poder reutilizar el código. Para enseñaros como utilizar Props en React, lo vamos a aplicar en una aplicación de contactos. https://flic.kr/p/2o2EtyS En primer lugar os enseñamos una tarjeta de contacto, donde contiene información, como su nombre, la foto , el número de teléfono y su correo electrónico. Lo hemos guardado en nuestro componente llamado index.js. Allí…continue reading →

Uso de la API de Spotify

El mayor problema que nos puede presentar la API de Spotify es la autenticación del usuario, sí que es verdad que la mayoría de las peticiones tiene un cierto limite de envío de datos, esto quiere decir, que, si por ejemplo queremos mostrar nuestras listas de reproducción, la api solo nos devolverá 50 resultados. Este problema lo podremos solucionar con un bucle realmente sencillo, pero para ello debemos conocer la cantidad de listas que tenemos, lo veremos mas adelante. Primeros Pasos Lo primero de todo es crear nuestro proyecto de react con el…continue reading →

Login Y Registro con AUTH0 en REACT

En este post vamos a enseñar como utilizar AUTH0 un proveedor de autenticación a REACT Lo primero es registrarse en AUTH0 https://www.flickr.com/photos/197088457@N08/52525159594/in/shares-10d138Xtp5/ Elegimos other y pinchamos en el checkbox para cambiar de región nuestra cuenta https://www.flickr.com/photos/197088457@N08/52525159584/in/shares-tSDkT4sSVz/ Elegimos el nombre del dominio que queramos y la regio EU https://www.flickr.com/photos/197088457@N08/52524411962/in/shares-m0PBz7Q821/ Pulsamos en el botón de crear aplicación https://www.flickr.com/photos/197088457@N08/52525159564/in/shares-nYC243pYb0/ Pinchamos en single page applications ya que es para una aplicación de React y pulsamos crear https://www.flickr.com/photos/197088457@N08/52524878616/in/shares-59071Xq863/ Le decimos que es para una aplicación de REACT https://www.flickr.com/photos/197088457@N08/52525431418/in/shares-X38tEks99e/ Pulsamos en el enlace de para conseguir la application keys…continue reading →

Pasarela de Pagos con React, Express.js y Stripe

En este post se procederá a explicar cómo realizar una pasarela de pagos con: para frontend > ReactJS, para backend > Express.js (con Node.js) y, para la pasarela propiamente, la plataforma > Stripe. React se usará principalmente para la visualización de contenido, establecimiento de información, el carrito de compra con los determinados elementos, etc... Y Express.js simplemente para que se puedan realizar de forma funcional las peticiones y se puedan mostrar dichas respuestas en la parte cliente. Es importante resaltar que la plataforma de Stripe es muy amplia. Tiene numerosas funcionalidades, pero lo…continue reading →