Solucionar error Could not find Ninja on PATH or in SDK CMake bin folders. en React Native con Expo

Solucionar error Could not find Ninja on PATH or in SDK CMake bin folders. en React Native con Expo

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el siguiente error: A problem occurred evaluating project ‘:expo’. A problem occurred configuring project ‘:expo-modules-core’.[CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. Este error ocurre cuando queremos generar el build de desarrollo con Expo: Para solucionar este error, tenemos que ir al SDK manager de Android … Leer más

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

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

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

Generar un sitemap.xml dinámico con Next.js

Generar un sitemap.xml dinámico con Next.js

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos generar un sitemap.xml de forma dinámica con Next.js esto es muy útil si tenemos links separados de cada uno de nuestros artículos y queremos generar su sitemap.xml. Con esta técnica mejoraremos mucho el SEO de nuestra web y ayudaremos a los buscadores a indexar correctamente nuestra web. Lo primero … Leer más