Generar build de desarrollo con React Vite

Generar build de desarrollo con React Vite

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos generar un build de desarrollo con React Vite. Esto generará la carpeta dist con configuración de desarrollo. Para ello tenemos que ir al archivo packcage.json y añadir este comando dentro de «scripts»: { Y para poder utilizarlo tenemos que utilizar este comando: De esta forma generaremos el build en … Leer más

Crear RadioGroup con RadioButtons usando React con TypeScript

Crear RadioGroup con RadioButtons usando  React con TypeScript

Tiempo de lectura: 2 minutos Vamos crear un componente de RadioGroup compuesto a su vez de RadioButtons. Primero vamos a crear el componente RadioGroup. Ahora creamos un componente RadioButton como muestro a continuación: Después vamos a usar los componentes de la siguiente manera. Por último muestro como queda el resultado. Espero que les sirva de ayuda. ¡Que tengan un feliz … Leer más

Cargar un fichero XLS (Excel) usando Javascript en React

Cargar un fichero XLS (Excel) usando Javascript en React

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos cargar un fichero XLS de Excel usando React. Lo primero que tenemos que hacer es instalar la librería xlsx: Una vez instalado creamos nuestra función de carga XLSLoader Aquí indicamos la ruta correcta al archivo: nuestra_ruta_al_xls.xls Si queremos hacer un componente independiente: Y para utilizarlo: isMa Ingeniero en Informática, … Leer más

Cargar el contenido de un archivo XML con Javascript en React

Cargar el contenido de un archivo XML con Javascript en React

Tiempo de lectura: 4 minutos Hoy vamos a aprender cómo podemos cargar un fichero XML dentro de nuestro proyecto React para mostrar los datos. Lo primero que vamos a hacer es instalar la librería necesaria, en este caso usaremos xml2js Una vez instalado vamos a crear el componente que se encargará de cargar nuestro fichero XML. XMLLoader.js En TypeScript: Explicación: … Leer más

Añadir un tema en React para cambiar los colores de elementos y fuente de texto

Añadir un tema en React para cambiar los colores de elementos y fuente de texto

Tiempo de lectura: < 1 minuto Hola, hoy vamos a aprender a añadir un Theme para personalizar los colores que se muestran en el tema de nuestra web en React. Para este tutorial vamos a utilizar Material UI Primero instalamos las dependencias necesarias: Ahora vamos a crear nuestro tema, creamos un archivo llamado theme.tsx (uso TypeScript, puedes crearlo en JavasScript) En … Leer más

Conectar una Aplicación React Native a un WebSocket

Conectar una Aplicación React Native a un WebSocket

Tiempo de lectura: < 1 minuto Hoy aprenderemos cómo podemos conectar nuestra aplicación desarrollada en React Native con un WebSocket usando la librería https://www.npmjs.com/package/react-native-websocket Configuración de la Aplicación React Native Asegúrate de reemplazar ws://localhost:8000/ws/1 con la URL de tu servidor FastAPI. o Visita http://localhost:3000 en tu navegador y verás la aplicación React Native. Puedes escribir mensajes, enviarlos y ver las respuestas … Leer más

Conectar una Aplicación React a un WebSocket

Conectar una Aplicación React a un WebSocket

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

Solucionar error en React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

Solucionar error en React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

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

Crear un nuevo proyecto Expo con Typescript en React Native

Crear un nuevo proyecto Expo con Typescript en React Native

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

Pasar un parámetro/atributo de una pantalla de React a otra

Pasar un parámetro/atributo de una pantalla de React a otra

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