Documentación en React, usar TypeDoc para generar documentación usando comentarios JSDoc

Documentación en React, usar TypeDoc para generar documentación usando comentarios JSDoc

Tiempo de lectura: 2 minutos Para generar documentación automáticamente de tu librería de React usando TypeScript, puedes usar una herramienta como TypeDoc. TypeDoc genera documentación a partir de los comentarios JSDoc en tu código y los tipos de TypeScript. Pasos para Generar Documentación con TypeDoc Aquí –out docs indica que la documentación se generará en una carpeta llamada docs. Esto … Leer más

Documentación: Cómo implementar Storybook en React

Documentación: Cómo implementar Storybook en React

Tiempo de lectura: 3 minutos Usar Storybook para documentar y desarrollar tus componentes de React es una excelente manera de crear un entorno visual donde puedas ver y probar tus componentes de forma aislada. 1. Instalar Storybook Primero, asegúrate de estar en la raíz de tu proyecto y ejecuta el siguiente comando para instalar Storybook: Esto instalará Storybook y configurará … Leer más

Crear una librería para React partiendo desde un proyecto y con MicroBundle

Crear una librería para React partiendo desde un proyecto y con MicroBundle

Tiempo de lectura: 2 minutos Hoy vamos a crear una librería de React de una forma más sencilla y sin utilizar otras librerías. Solo usaremos el compilador MicroBundle. Lo primero que tenemos que hacer es crear un proyecto nuevo React, usaremos TypeScript: Ahora crearemos una nueva carpeta dentro de src llamada components y crearemos un componente de ejemplo llamado Button.tsx … Leer más

Crear una librería para React usando create-react-library

Crear una librería para React usando create-react-library

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo podemos crear una librería con React. Primero vamos a instalar las dependencias necesarias, vamos a desarrollarla en TypeScript: Lo primero que tenemos que hacer es crear un nuevo poyecto para nuestra librería. Rellenamos todo lo que nos va indicando, en licencia puedes indicar la que quieras, aquí te indico algunas: … Leer más

Cargar una variable de entorno mediante .env en React usando Vite

Cargar una variable de entorno mediante .env en React usando Vite

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos cargar una variable de entorno dentro de un .env usando Vite en React. Primero tenemos que crear nuestro archivo .env en raíz del proyecto: Hemos añadido una variable llamada VITE_BASE_URL es muy importante que todas las variables que se añadan comiencen por VITE_. Ahora simplemente para acceder a ella … Leer más

Añadir un plugin que permita editar AndroidManifest.xml cuando generas un proyecto con Expo en React Native ejemplo para añadir com.google.android.gms.ads.APPLICATION_ID

Añadir un plugin que permita editar AndroidManifest.xml cuando generas un proyecto con Expo en React Native ejemplo para añadir com.google.android.gms.ads.APPLICATION_ID

Tiempo de lectura: 2 minutos Hoy vamos a crear un plugin que nos permitirá editar el manifest de Android a la hora de generar el build con Expo en React Native. En este ejemplo añadiremos el ID de aplicación necesario para Google Admob. Primero vamos a crear un archivo que llamaremos AdmobExtraConfigManifest.js (no importa si usas TypeScript, vamos a usar … Leer más

Crea una App de Adivinanzas con React y ChatGPT API

Crea una App de Adivinanzas con React y ChatGPT API

Tiempo de lectura: 2 minutos En este tutorial, vamos a construir una aplicación divertida de adivinanzas donde los usuarios pueden intentar adivinar objetos, animales o cualquier cosa que quieran. La gracia es que la app usará la API de ChatGPT para dar pistas creativas y a veces desafiantes. Paso 1: Configura tu Proyecto de React Paso 2: Diseña el Componente … Leer más

Cargar .env en un proyecto de React Native

Cargar .env en un proyecto de React Native

Tiempo de lectura: 3 minutos Para cargar un archivo .env en un proyecto de React Native, es común usar la biblioteca react-native-dotenv o react-native-config, que te permite gestionar variables de entorno de manera eficiente. 1. Instalar las dependencias necesarias Ejecuta el siguiente comando en la terminal para instalar react-native-config en tu proyecto. Si estás usando Yarn: 2. Agregar las variables … Leer más

¿Qué es la recarga en vivo Live Reloading y la Recarga en Caliente (hot reloading) en React Native?

¿Qué es la recarga en vivo Live Reloading y la Recarga en Caliente (hot reloading) en React Native?

Tiempo de lectura: 3 minutos Vamos a profundizar en una característica fundamental de React Native: la recarga en vivo (live reloading) y la recarga en caliente (hot reloading). Recarga en Vivo y Recarga en Caliente Estas dos características mejoran significativamente la experiencia de desarrollo, permitiendo a los desarrolladores ver los cambios en su código casi instantáneamente, sin necesidad de recompilar … Leer más

Entendiendo React Native: ¿Qué es la arquitectura puente?

Entendiendo React Native: ¿Qué es la arquitectura puente?

Tiempo de lectura: 2 minutos La Arquitectura puente (bridge architecture) de React Native es una de las características más importantes y distintivas del marco. Permite la comunicación entre el código JavaScript y el código nativo (Objective-C, Swift para iOS, y Java, Kotlin para Android). Esta comunicación se lleva a cabo mediante un puente (bridge) que traduce y pasa mensajes entre … Leer más