Crear RadioGroup con RadioButtons usando React con TypeScript

Crear RadioGroup con RadioButtons usando  React con TypeScript

Tiempo de lectura: 2 minutos Vamos crear un componente de RadioGroup compuesto a su vez de RadioButtons. Primero vamos a crear el componente RadioGroup. Ahora creamos un componente RadioButton como muestro a continuación: Después vamos a usar los componentes de la siguiente manera. Por último muestro como queda el resultado. Espero que les sirva de ayuda. ¡Que tengan un feliz … Leer más

Cargar un fichero XLS (Excel) usando Javascript en React

Cargar un fichero XLS (Excel) usando Javascript en React

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos cargar un fichero XLS de Excel usando React. Lo primero que tenemos que hacer es instalar la librería xlsx: Una vez instalado creamos nuestra función de carga XLSLoader Aquí indicamos la ruta correcta al archivo: nuestra_ruta_al_xls.xls Si queremos hacer un componente independiente: Y para utilizarlo: isMa Ingeniero en Informática, … Leer más

Cargar el contenido de un archivo XML con Javascript en React

Cargar el contenido de un archivo XML con Javascript en React

Tiempo de lectura: 4 minutos Hoy vamos a aprender cómo podemos cargar un fichero XML dentro de nuestro proyecto React para mostrar los datos. Lo primero que vamos a hacer es instalar la librería necesaria, en este caso usaremos xml2js Una vez instalado vamos a crear el componente que se encargará de cargar nuestro fichero XML. XMLLoader.js En TypeScript: Explicación: … Leer más

Añadir un tema en React para cambiar los colores de elementos y fuente de texto

Añadir un tema en React para cambiar los colores de elementos y fuente de texto

Tiempo de lectura: < 1 minuto Hola, hoy vamos a aprender a añadir un Theme para personalizar los colores que se muestran en el tema de nuestra web en React. Para este tutorial vamos a utilizar Material UI Primero instalamos las dependencias necesarias: Ahora vamos a crear nuestro tema, creamos un archivo llamado theme.tsx (uso TypeScript, puedes crearlo en JavasScript) En … Leer más

Conectar una Aplicación React Native a un WebSocket

Conectar una Aplicación React Native a un WebSocket

Tiempo de lectura: < 1 minuto Hoy aprenderemos cómo podemos conectar nuestra aplicación desarrollada en React Native con un WebSocket usando la librería https://www.npmjs.com/package/react-native-websocket Configuración de la Aplicación React Native Asegúrate de reemplazar ws://localhost:8000/ws/1 con la URL de tu servidor FastAPI. o Visita http://localhost:3000 en tu navegador y verás la aplicación React Native. Puedes escribir mensajes, enviarlos y ver las respuestas … Leer más

Conectar una Aplicación React a un WebSocket

Conectar una Aplicación React a un WebSocket

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos conectar nuestra web desarrollada con React a un WebSocket Configuración de la Aplicación React Asegúrate de reemplazar ws://localhost:8000/ws/1 con la URL de tu servidor FastAPI. Visita http://localhost:3000 en tu navegador y verás la aplicación React. Puedes escribir mensajes, enviarlos y ver las respuestas del servidor FastAPI a través del … Leer más

Solucionar error en React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

Solucionar error en React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

Tiempo de lectura: < 1 minuto Hoy vamos a aprender a solucionar un error que aparece al crear un nuevo proyecto con Expo y TypeScript. Este error es: Este error suele producirse por que el nombre del paquete es distitno entre app/build.gradle y nuestro proyecto expo en app.json Tenemos que abrir app/build.gradle y poner el proyecto con el nombre correcto, applicationId … Leer más

Crear un nuevo proyecto Expo con Typescript en React Native

Crear un nuevo proyecto Expo con Typescript en React Native

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos crear un nuevo proyecto de React Native con Expo. Crear un nuevo proyecto con React Native, Expo y TypeScript es un proceso relativamente sencillo. Aquí tienes los pasos básicos que puedes seguir: Paso 1: Instalar Node.js y npm Asegúrate de tener Node.js y npm instalados en tu máquina. Puedes … Leer más

Pasar un parámetro/atributo de una pantalla de React a otra

Pasar un parámetro/atributo de una pantalla de React a otra

Tiempo de lectura: 2 minutos Hola, hoy vamos a aprender cómo podemos pasar un parámetro de una pantalla de React a otra. Paso 1: Instalación de React Router v6 Si aún no lo has hecho, instala React Router v6: Paso 2: Configuración de React Router En tu archivo App.js, configura las rutas utilizando BrowserRouter y Route: Paso 3: Navegación con … Leer más

Añadir mensaje de consentimiento de anuncios GDPR Europea con React Native Google Mobile Ads (ADMOB) con Expo

Añadir mensaje de consentimiento de anuncios GDPR Europea con React Native Google Mobile Ads (ADMOB) con Expo

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir el mensaje obligatorio de consentimiento de anuncios para cumplir con la GDPR. Lo primero que tenemos que hacer es tener nuestro mensaje configurado: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/ NOTA: uso la versión 12.2.0 de react-native-google-mobile-ads como mínimo (https://github.com/invertase/react-native-google-mobile-ads) Una vez configurado, vamos a android/app/proguard-rules.pro y añadimos: Ahora tenemos que ir a nuestro … Leer más