Tiempo de lectura: < 1 minuto Today I share a solution to properly configure the nginx.conf file to make it compatible with react-router-dom route management. To solve the error, we need to add the line try_files $uri $uri/ /index.html; inside the nginx.conf file http{ … server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri … Read more
Tiempo de lectura: < 1 minuto Today we are going to learn how we can generate a development build with React Vite. This will generate the dist folder with development configuration. To do this, we need to go to the package.json file and add this command inside «scripts»: { “scripts”: { … “build-dev”: “tsc && vite build –mode development”, … } … Read more
Tiempo de lectura: 2 minutos Let’s create a RadioGroup component composed of RadioButtons. First, we create the RadioGroup component. import React, { useState } from ‘react’; import RadioGroup from ‘./RadioGroup’; // Adjust the path according to your file structure import RadioButton from ‘./RadioButton’; // Adjust the path according to your file structure const YourComponent = () => { const [gender, … Read more
Tiempo de lectura: < 1 minuto Today we are going to learn how we can load an Excel XLS file using React. The first thing we have to do is install the xlsx library: npm install xlsx Once installed, we create our loading function XLSLoader: import * as XLSX from ‘xlsx’; async function loadExcelData() { const response = await fetch(‘our_path_to_xls.xls’); const … Read more
Tiempo de lectura: 4 minutos Today we are going to learn how we can load an XML file into our React project to display the data. The first thing we are going to do is to install the necessary library, in this case, we will use xml2js. npm install xlsx Once installed, we are going to create the component that … Read more
Tiempo de lectura: < 1 minuto Reading Time: < 1 minute Hello, today we are going to learn how to add a theme to customize the colors displayed in the theme of our React website. For this tutorial, we will use Material UI. First, we install the necessary dependencies: npm install @mui/material @emotion/react @emotion/styled Now, let’s create our theme by creating … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how we can add the mandatory ad consent message to comply with GDPR. The first thing we need to do is to have our message set up: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/ NOTE: I am using version 12.2.0 of react-native-google-mobile-ads at least (https://github.com/invertase/react-native-google-mobile-ads) Once configured, let’s go to android/app/proguard-rules.pro and add: -keep class … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how we can implement the GDPR consent message with React Native. Let’s install the following library (https://www.npmjs.com/package/@ulangi/react-native-ad-consent) npm install @ulangi/react-native-ad-consent –save Now let’s add this key in info.plist of iOS: <key>GADDelayAppMeasurementInit</key> <true/> Now we open AndroidManifest.xml in case of Android. And add: <meta-data android:name=”com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT” android:value=”true”/> <uses-library android:name=”org.apache.http.legacy” android:required=”false”/> And … Read more
Tiempo de lectura: 2 minutos Today we will learn how to connect our React Native application to a WebSocket using the https://www.npmjs.com/package/react-native-websocket library Setting up React Native Application Create a New React Native Project: Create a new React Native project using react-native-cli: npx react-native init MyReactNativeApp cd MyReactNativeApp Install WebSocket Dependencies: Install the react-native-websocket library to handle WebSocket connections in … Read more
Tiempo de lectura: < 1 minuto Today we’re going to learn how to connect our web application developed with React to a WebSocket. Configuration of the React Application Create a New React Project: Create a new React project using create-react-app: npx create-react-app my-react-app cd my-react-app Install WebSocket Dependency: Install the react-websocket library to handle WebSocket connections in React: npm install –save … Read more
