isMa 
Tiempo de lectura: 2 minutosHoy vamos a ver cómo podemos comunicar una web creada con React con un iFrame o frame en React o HTML con JavaScript. Cargar el Frame Creamos un iframe: En urlCargar ponemos la URL de la web de la que queremos capturar el evento. Ahora creamos el evento que nos permitirá obtener los datos: Primero … Leer más
Tiempo de lectura: < 1 minutoHoy vamos a aprender cómo podemos comunicar un Web creada con React con un WebView en React Native y además utilizaremos la función postMessage() de JavaScript. Esto es muy útil para poder realizar interfaces con web y poderlas implementar dentro de una APP. React Native Utilizaremos la librería react-native-webview La importamos: Lo primero que tenemos … Leer más
Tiempo de lectura: 2 minutosHoy vamos a aprender cómo implementar un lector de códigos de barras utilizando React. Lo primero que tenemos que hacer es instalar la librería quagga2 también se puede usar quagga. Una vez instalado, vamos a crear un componente llamado scanner.tsx El lector reconocerá códigos que indiquemos en el decoder: { readers: [«ean_reader», …] para añadir … Leer más
Tiempo de lectura: < 1 minutoSi VSCode nos deja de mostrar el explorador. Tendremos que hacer lo siguiente: Vamos a VSCode y pulsamos: Se abrirá la consola de comandos. Y tendremos que ejecutar este comando (copiáis y pegáis): isMa Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 … Leer más
Tiempo de lectura: 2 minutosHoy vamos a aprender cómo podemos crear un componente de Mapas compatible con Open Street Maps usando la librería Leaftlet en React. Lo primero que tenemos que hacer es instalar la librería necesaria: Y después la librería Leaflet: Y si necesitamos TypeScript (en mi caso sí) instalamos lo siguiente: Instalamos los iconos: Ahora podemos crear … Leer más
Tiempo de lectura: < 1 minutoTe explicaré cómo crear un componente de React que envuelva a otro y renderice su contenido dentro de algún marcado adicional, como <Texto>{child}</Texto> Creamos un componente de ejemplo llamado Texto: En este ejemplo, el componente Texto recibe children como una prop y los renderiza dentro de un div con un borde azul y un relleno … Leer más
Tiempo de lectura: 2 minutosEn React, este tipo de componente se conoce como un «componente de orden superior» o «HOC» (Higher Order Component). Un HOC es una función que toma un componente y devuelve otro componente que generalmente proporciona funcionalidad adicional al componente original. Supongamos que queremos crear un HOC llamado WrapperComponent que envuelva a otro componente llamado WrappedComponent … Leer más
Tiempo de lectura: < 1 minutoHoy vamos a solucionar el error común que puede aparecer cuándo estamos implementando i18n en nuestro entorno React con Next.js. Este es el error: En server aparece un contenido distinto que en client. Esto generalmente se debe a que estamos importando mal la librería i18n (el componente useTranslation). Para ello vamos a comprobar que tenemos … Leer más
Tiempo de lectura: 4 minutosHoy vamos a aprender cómo podemos añadir internacionalización Server Side para que directamente nuestro servidor de Next.js nos devuelva las páginas traducidas para beneficiar al SEO. Lo primero que tenemos que hacer es instalar las dependencias necesarias: Después vamos a crear un archivo de configuración next-i18next.config.js en la raíz del proyecto: En mi caso voy … Leer más
Tiempo de lectura: < 1 minutoHoy voy a explicar y proporcionar un ejemplo de middleware en Next.js Un middleware en Next.js es una función que se ejecuta antes de que una solicitud llegue a tu ruta o API de Next.js. Puedes usar middleware para manejar y manipular solicitudes entrantes. Aquí están algunas cosas que puedes hacer con middleware en Next.js: … Leer más
