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
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
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
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
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
Tiempo de lectura: 2 minutos Hola y bienvenidos a mi nuevo artículo sobre React. Hoy vamos a ver cómo podemos crear un fragment con React. Un fragment, es un espacio en la pantalla que se cambia cuando pulsamos un botón o un menú. Para crear este fragment, primero vamos a crear el menú que permite cambiar de pantalla: Lo llamamos … Leer más
Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos implementar el mensaje de consentimiento de GDPR con React Native. Vamos a instalar la siguiente librería (https://www.npmjs.com/package/@ulangi/react-native-ad-consent) Ahora vamos a añadir esta clave en info.plist de iOS: Ahora abrimos AndroidManifest.xml en caso de Android. Y añadimos: Y ahora creamos nuestro componente llamado consentAdmob.ts Para usar las funciones que proporcionamos, … Leer más
Tiempo de lectura: 2 minutos En el mundo del desarrollo web, la elección del framework adecuado puede marcar la diferencia entre una aplicación mediocre y una experiencia de usuario excepcional. Entre las opciones disponibles, React se destaca como una herramienta poderosa y versátil. Aquí se indican sus principales características: Al considerar estas ventajas, queda claro por qué React sigue siendo … Leer más
Tiempo de lectura: 2 minutos Hoy quería compartir una forma sencilla de implementar un componente de paginación utilizando Material-UI en React. Este componente es útil cuando se trabaja con listas extensas, permite navegar entre las diferentes páginas. Primero creamos el componente de paginación con sus atributos para después poder usarlo dónde lo necesitemos. En el ejemplo anterior, pasamos por parámetro … Leer más
Tiempo de lectura: 2 minutos Si deseas analizar un proyecto React que incluye archivos TypeScript (.ts y .tsx) con SonarQube, necesitarás configurar SonarQube para que admita TypeScript y también ajustar tu proyecto para que la configuración de análisis de SonarQube sea efectiva. A continuación, se describen los pasos generales: 1. Configurar SonarQube para admitir TypeScript: Asegúrate de tener SonarQube instalado … Leer más
