Tiempo de lectura: 2 minutosToday we are going to learn how we can generate a sitemap.xml dynamically with Next.js. This is very useful if we have separate links for each of our articles and want to generate their sitemap.xml. With this technique, we will greatly improve the SEO of our website and help search engines properly index our site. … Read more
Tiempo de lectura: < 1 minutoToday we’re going to learn how to import and use our .mp3 files with Next and React. When we try to import a .mp3 file, we get this error: ./src/assets/sounds/ .mp3 Module parse failed: Unexpected character ” (1:3) You may need an appropriate loader to handle this file type, currently no loaders are configured to … Read more
Tiempo de lectura: 3 minutosToday we are going to learn how to implement the Stripe payment platform in React. Stripe is a secure payment platform for online transactions or micro-transactions. It will save us from having to store credit card data and help comply with GDPR. Another advantage is the low commission it charges on each transaction. The first … Read more
Tiempo de lectura: < 1 minutoToday we are going to implement a function that will allow us to play sound using React. The first thing we need to do is to create this function that will allow us to load the sound: export function loadSound(source: string) { const sound = document.createElement(“audio”); sound.src = source; sound.setAttribute(“preload”, “auto”); sound.setAttribute(“controls”, “none”); sound.style.display = … Read more
Tiempo de lectura: < 1 minutoIf we encounter this error while trying to generate an apk of a React Native application SDK location not found Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project’s local properties file, we need to do the following to fix it. Now we will create … Read more
Tiempo de lectura: < 1 minutoLet’s see how to set up the general styles for an application developed in React Native. To do this, on the screen where the different screens and routes are established, within the StackNavigator, we will add the screenOptions. The screenOptions is an object that contains the style and layout options for the screens in navigation. … Read more
Tiempo de lectura: 2 minutosToday we’re going to see how we can communicate a web created with React with an iFrame or frame in React or HTML with JavaScript. Loading the Frame We create an iframe: <iframe src={urlCargar} style={{ width: ‘100%’, height: ‘500px’ }} /> In urlCargar we put the URL of the web from which we want to … Read more
Tiempo de lectura: < 1 minutoToday we are going to learn how we can communicate a web app created with React with a WebView in React Native, and also use the postMessage() function of JavaScript. This is very useful for creating interfaces with web content and implementing them within a mobile app. React Native We will use the library react-native-webview … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how to implement a barcode scanner using React. The first thing we need to do is install the quagga2 library. You can also use quagga. npm install @ericblade/quagga2 –save Once installed, we are going to create a component called scanner.tsx import Quagga from ‘@ericblade/quagga2’; import React, { useEffect, useCallback … Read more
Tiempo de lectura: < 1 minutoIf VSCode stops showing the explorer, we need to do the following: Go to VSCode and press: Ctrl+Shift+P (Windows or Linux) Cmd+Shift+P (Mac) The command console will open. And we need to run this command (copy and paste): View: Reset View Locations
