Añadir modo oscuro (Dark Mode) en React usando Mui

Añadir modo oscuro (Dark Mode) en React usando Mui

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir modo oscuro usando React y la librería de diseño MUI. Lo primero que haremos es crear dos temas oscuro y claro: Theme.tsx Una vez creados vamos a generar la lógica que establecerá el modo oscuro según las prefrencias del usuario. Dentro de nuestro _app.tsx o archivo principal: Con … Leer más

Deja de instalar servicios en tu VPS, usa Docker

Deja de instalar servicios en tu VPS, usa Docker

Tiempo de lectura: 2 minutos En el vertiginoso mundo del desarrollo de software, la eficiencia es la clave. Cada línea de código cuenta, cada recurso computacional es valioso y cada segundo perdido puede significar una ventaja competitiva sacrificada. En este contexto, Docker emerge como una herramienta revolucionaria que no solo simplifica el proceso de desarrollo y despliegue de aplicaciones, sino … Leer más

Añadir Google AdSense en React

Añadir Google AdSense en React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir Google Adsense en React. Lo primero que tenemos que hacer es crear una cuenta en Google Adsense y obtener nuestro código de página. Ahora tenemos que añadir el código dentro de nuestro head de esta forma: Donde en ca-pub-XXXXXXXXXXXXX debemos indicar nuestro id de Google Adsense. Y ahora … Leer más

Validar token ReCaptcha usando PHP

Validar token ReCaptcha usando PHP

Tiempo de lectura: < 1 minuto Hoy os voy a compartir un código para poder validar un Token ReCaptcha con PHP. Lo primero que haremos es copiar esta función en el archivo dónde queramos validar: En este ejemplo pasamos por body JSON el código reCaptcha obtenido y lo validamos. Sustituye SECRET_CODE por el código secreto obtenido al crear el captcha. Para … Leer más

Añadir un SVG en React Native con Expo

Añadir un SVG en React Native con Expo

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos añadir una imagen SVG en React Native usando Expo. Lo primero que haremos es instalar las dependencias necesarias: Primero react-native-svg Y ahora instalamos react-native-svg-transformer Una vez instaladas tenemos que configurar react-native-svg-transformer. Para ello abrimos el archivo metro.config.js y añadimos: Y si usamos TypeScript tendremos que añadir este código dentro … Leer más

Añadir captcha reCAPTCHA Google a React

Añadir captcha reCAPTCHA Google a React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos validar un formulario, incluyendo un reCAPTCHA para evitar ataques de spam por BOTS. Lo primero que tenemos que hacer es registrar nuestro código de reCAPTCHA en Google: https://www.google.com/recaptcha/about/ Y pulsamos en v3 Admin Console Le damos a crear una nueva en el botón del más (+) y en este … Leer más

Decodificar Token JWT en React

Decodificar Token JWT en React

Tiempo de lectura: < 1 minuto Hoy vamos a aprender una pequeña función para decodificar tokens JWT usando React. Lo primero que haremos es instalar las librerías necesarias: JsonWebToken auth0.js Y los tipos si usamos TypeScript: Una vez instalado, vamos a crear esta función en un archivo de utils.tsx Nos decodificará los tokens que pasemos como parámetro y los devolverá en … Leer más

Implementar inicio de sesión con Google en React

Implementar inicio de sesión con Google en React

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos implementar inicio de sesión con Google Sign y React, además compatible con Next.js. Lo primero que tenemos que hacer es instalar la librería React Oauth2 Google Una vez instalado tenemos que crear nuestras credenciales para ello: Vamos a Google Cloud Platform (https://cloud.google.com/) y pulsamos en Consola Ahora seleccionamos nuestro … Leer más

Crear una Progressive Web App (PWA) usando React y Next.js

Crear una Progressive Web App (PWA) usando React y Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear una web progresiva PWA utilizando React y Next.js. Instalamos la dependencia que vamos a utilizar next-pwa Ahora creamos un archivo manifest.json dentro de public. Pondremos el nombre y los datos de nuestra app y enlazaremos el icono. Podemos elegir la orientación indicando:   «orientation»: «portrait» Creamos un archivo … Leer más

Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

Tiempo de lectura: < 1 minuto Si queremos cargar paths en Next.js con o sin paramétros y que no nos redireccione a 404 tenemos que hacer lo siguiente: Primero creamos nuestra ruta de carpetas como necesitemos en este ejemplo es: Dentro de nuestro archivo [id].tsx es dónde trataremos ese id y realizaremos las operaciones que queramos. Esto funcionaría para las rutas: … Leer más