Conceptos básicos del desarrollo local

10 ejemplos para iniciarte en el desarrollo local - 7 básicos y 3 intermedios.

Requisitos previos

El desarrollo local con Expo es un servidor de desarrollo Metro en tu laptop más una aplicación cliente en un simulador, emulador o dispositivo físico. Realiza el scaffolding una vez, luego reutiliza el mismo comando de inicio todos los días.

npx create-expo-app@latest MyDevApp --template blank-typescript
cd MyDevApp

Confirma la versión fija del SDK antes de tu primera ejecución:

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

Instala Expo Go en un dispositivo físico (App Store / Play Store) si tienes planeado escanear códigos QR. Los simuladores y emuladores no necesitan Expo Go - la CLI los abre directamente.

Herramientas: Estos ejemplos están dirigidos a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0 y React 19.2.3. Metro sirve JavaScript en el puerto 8081 de forma predeterminada.

Ejemplos básicos

1. Iniciar el servidor de desarrollo

npx expo start es el punto de entrada diario - inicia Metro, imprime las URLs de conexión y muestra un código QR en la terminal.

cd MyDevApp
npx expo start

› Metro waiting on exp://192.168.1.42:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
 
› Press i │ open iOS simulator
› Press a │ open Android emulator
› Press r │ reload app
› Press ? │ show all commands

• Metro agrupa bajo demanda - guardar un archivo activa Fast Refresh sin una reconstrucción nativa completa
• La URL exp:// impresa es lo que los simuladores, Expo Go y los clientes de desarrollo usan para descargar el bundle de JS
• Deja esta terminal ejecutándose; abre una segunda pestaña para comandos git, pruebas o eas
• Si el servidor sale inmediatamente, ejecuta npx expo doctor para detectar desajustes de versiones de SDK o Node antes de depurar problemas de red

Relacionado: Expo Platform Basics - diseño del proyecto y versión fija del SDK | Hot Reload vs Fast Refresh - lo que persiste en un guardado

2. Modo LAN (Predeterminado)

LAN anuncia la IP local de tu laptop para que los teléfonos y tablets en el mismo Wi-Fi puedan alcanzar Metro - no se requieren banderas adicionales.

# LAN is the default - Metro advertises your machine's local IP
npx expo start

# Sanity-check that the device can reach your machine (replace with the IP Metro printed)
curl -I http://192.168.1.42:8081/status

• LAN mantiene el tráfico en tu red local - latencia más baja y el valor predeterminado correcto para Wi-Fi de oficina y hogar
• Ambos dispositivos deben estar en la misma subred; las redes de invitados y el aislamiento del cliente a menudo bloquean el tráfico entre teléfono y laptop
• Las VPNs en ambos lados frecuentemente rompen LAN - desconecta la VPN en el dispositivo o laptop antes de cambiar a tunnel
• Los firewalls corporativos que bloquean el puerto 8081 entrante son la razón más común por la que LAN "funciona en simulador pero no en teléfono"

Relacionado: Physical Device Testing - depuración USB y emparejamiento inalámbrico cuando LAN no es confiable

3. Modo Tunnel

Tunnel enruta Metro a través del relé de Expo para que un dispositivo pueda cargar tu bundle incluso cuando LAN está bloqueado - al costo de la velocidad.

# Use when LAN QR scans fail on guest Wi‑Fi, VPN, or remote pairing
npx expo start --tunnel

› Metro waiting on exp://u3k1-xxxxx.exp.direct:80
› Tunnel ready.

• Tunnel es más lento que LAN - espera cargas iniciales más largas y ocasionalmente Fast Refresh lento
• La primera ejecución de tunnel puede pedirte que inices sesión con npx expo login para que Expo pueda aprovisionar la URL del relé
• Prefiere LAN cuando funcione; reserva tunnel para demostraciones, dispositivos de cliente fuera de la red o Wi-Fi corporativo bloqueado
• Si tunnel se detiene en "Conectando...", verifica que HTTPS saliente esté permitido e intenta de nuevo con npx expo start --tunnel --clear

Relacionado: Physical Device Testing - cuando las compilaciones USB o internas reemplazan tunnel completamente

4. Flujo de trabajo con código QR y Expo Go

Escanear el código QR de la terminal es la forma más rápida de abrir un proyecto en un dispositivo real sin Xcode o Android Studio.

npx expo start
# Point your phone at the ASCII QR block in the terminal

• El código QR codifica la misma URL exp:// que imprime Metro - escanear es solo un atajo para escribir la URL manualmente
• Expo Go incluye un runtime nativo fijo; solo carga proyectos cuyos módulos nativos se incluyen en esa compilación de Expo Go para SDK 57
• Después de la primera apertura, el proyecto aparece en Recientemente abiertos dentro de Expo Go para relanzar con un toque
• Si el escaneo tiene éxito pero la aplicación se detiene en "Descargando...", vuelve a tunnel (Ejemplo 3) o confirma la accesibilidad de LAN (Ejemplo 2)

Relacionado: expo-dev-client - cuando Expo Go ya no es suficiente | iOS Simulator & Android Emulator - flujos de trabajo simulador-primero

5. Atajos de simulador y emulador

Con Metro ejecutándose, los atajos de terminal de una sola tecla inician simuladores sin memorizar comandos específicos de plataforma.

npx expo start

• Los atajos solo funcionan en la terminal donde expo start está enfocado - no son atajos globales
• i / a no compilan nada por sí solos; inician el simulador y crean un enlace profundo a tu servidor Metro en ejecución
• Si a reporta que no hay emulador, crea un AVD en Android Studio - Device Manager, luego presiona a de nuevo
• j abre la historia del depurador de RN 0.86 - inspector de elementos, rendimiento y árbol de componentes sin Flipper

Relacionado: iOS Simulator & Android Emulator - configuración de AVD, instantáneas y matriz de dispositivos | React Native DevTools - paneles de inspector y rendimiento

6. Limpiar la caché de Metro

Los bundles obsoletos después de cambios en dependencias o configuración se corrigen reiniciando Metro con una caché limpia.

# After npm install, SDK bump, or babel.config.js edits
npx expo start --clear
 
# Combine with a host mode when needed
npx expo start --clear --tunnel

# Nuclear option when --clear is not enough (macOS / Linux)
rm -rf node_modules/.cache .expo
npx expo start --clear

• --clear borra la caché de transformación de Metro - la primera recarga después es más lenta, luego la velocidad vuelve a la normalidad
• Ejecuta con --clear después de npx expo install --fix, añadir un plugin Babel Reanimated o actualizar expo en package.json
• Síntomas que gritan "limpiar la caché": las importaciones se resuelven a rutas antiguas, Fast Refresh nunca detecta ediciones, pantallas rojas que hacen referencia a archivos eliminados
• Eliminar .expo reinicia el estado local de CLI (credenciales de tunnel en caché, último dispositivo abierto) - seguro, pero es posible que necesites escanear el código QR de nuevo

Relacionado: Hot Reload vs Fast Refresh - diagnosticar bundles obsoletos vs pérdida de estado | Expo CLI Best Practices - lista de verificación de higiene diaria

7. Scripts de equipo en package.json

Codifica el modo de host y los puntos de entrada de plataforma en package.json para que cada desarrollador ejecute comandos idénticos.

{
  "scripts": {
    "start": "expo start",
    "start:clear": "expo start --clear",
    "start:tunnel": "expo start --tunnel",
    "ios": "expo start --ios",
    "android": "expo start --android",
    "ios:device": "expo run:ios --device"
  }
}

npm run start          # LAN + QR - daily default
npm run start:tunnel   # Pairing session for QA on another network
npm run ios            # Simulator shortcut without an interactive terminal

• expo start --ios y --android combinan el inicio de Metro y el lanzamiento del cliente - útil en scripts de prueba de CI y tareas de VS Code
• expo run:ios --device compila e instala en un iPhone conectado (requiere que la firma de desarrollo de Apple esté configurada)
• Fija los scripts en package.json en lugar de documentar banderas únicas en README - la incorporación sigue siendo copiable y pegable
• Empareja start:clear con un gancho post-install o documenta "ejecutar después de cada git pull que toque package-lock.json"

Relacionado: Expo CLI Best Practices - convenciones de nomenclatura y guías de solución de problemas compartidas

Ejemplos intermedios

8. Cliente de desarrollo (expo-dev-client)

Una vez que añades módulos nativos fuera del runtime de Expo Go, inicia Metro en modo dev-client para que los códigos QR y las URLs abran tu compilación personalizada en lugar de Expo Go.

# Install the dev-client library (once per project)
npx expo install expo-dev-client
 
# Build and install the native shell locally (first time, or after native changes)
npx expo run:ios
# npx expo run:android
 
# Daily JS iteration - same Metro server, different client
npx expo start --dev-client

{
  "scripts": {
    "start": "expo start --dev-client",
    "ios": "expo start --dev-client --ios",
    "android": "expo start --dev-client --android"
  }
}

• --dev-client cambia la carga útil del código QR y el enlace profundo para que las compilaciones de desarrollo instaladas se conecten automáticamente
• Aún obtienes Fast Refresh - solo el shell nativo está precompilado; JavaScript se carga desde Metro como de costumbre
• Reconstruye el cliente de desarrollo después de cambios nativos (plugins app.json, nuevos módulos nativos, actualizaciones de SDK) - las ediciones solo de JS no requieren reconstrucción
• Presiona s en la terminal interactiva para cambiar entre Expo Go y compilación de desarrollo cuando ambos clientes están instalados

Relacionado: expo-dev-client - configuración del lanzador e iteración de módulos nativos | Expo Go vs Development Builds - elegir un modelo de cliente

9. Selección de host Localhost vs LAN

Los simuladores en la misma máquina pueden usar localhost; los dispositivos físicos siempre necesitan una dirección LAN o tunnel accesible.

# Simulators only - Metro listens on 127.0.0.1
npx expo start --localhost
 
# Physical device on desk - LAN is the default (no extra flag)
npx expo start
 
# Force a specific IP when Metro picks the wrong interface (VPN, Docker, Thunderbolt bridge)
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.42 npx expo start

• --localhost evita anunciar IPs en redes no confiables - útil en Wi-Fi de cafetería cuando solo necesitas el simulador
• REACT_NATIVE_PACKAGER_HOSTNAME anula la detección automática cuando tu Mac tiene múltiples interfaces activas y Metro imprime la incorrecta
• Los emuladores de Android a veces necesitan adb reverse cuando se usan configuraciones con mucho localhost - prefiere --host lan para sesiones mixtas de simulador + hardware
• Documenta la bandera de host que tu equipo usa en README - los grupos "siempre tunnel" y "siempre LAN" se desvían rápidamente sin valores predeterminados con script

Relacionado: Physical Device Testing - depuración inalámbrica cuando los reemplazos de nombre de host no son suficientes

10. Flujo de trabajo diario de extremo a extremo

Combina el tipo de cliente, el modo de host, la política de caché y la entrada del depurador en un bucle repetible para proyectos del SDK 57.

#!/usr/bin/env bash
# scripts/dev.sh - ayuda opcional del equipo
set -euo pipefail
 
CLIENT="${1:-dev}"   # dev | go
HOST="${2:-lan}"     # lan | tunnel | localhost
 
FLAGS=()
case "${HOST}" in
  tunnel)     FLAGS+=(--tunnel) ;;
  localhost)  FLAGS+=(--localhost) ;;
  lan)        ;; # predeterminado - sin bandera adicional
  *) echo "Host desconocido: ${HOST}" >&2; exit 1 ;;
esac
 
if [[ "${CLIENT}" == "dev" ]]; then
  FLAGS+=(--dev-client)
elif [[ "${CLIENT}" == "go" ]]; then
  FLAGS+=(--go)
fi
 
# Limpia la caché los lunes o después de cambios en dependencias
if [[ "${CLEAR_CACHE:-}" == "1" ]]; then
  FLAGS+=(--clear)
fi
 
npx expo start "${FLAGS[@]}"

# Expo Go en la LAN de oficina
./scripts/dev.sh go lan
 
# Cliente de desarrollo personalizado a través de tunnel para un dispositivo de QA remoto
./scripts/dev.sh dev tunnel
 
# Reinicio del lunes solo con simulador con caché limpia
CLEAR_CACHE=1 ./scripts/dev.sh dev localhost

Orden de solución de problemas cuando la aplicación no se conecta:

1. Confirma que Metro está ejecutándose y que el puerto 8081 no está siendo usado por otro proyecto de RN.
2. Intenta de nuevo npx expo start --clear después de cualquier npm install.
3. Cambia el host: LAN - tunnel (o establece REACT_NATIVE_PACKAGER_HOSTNAME).
4. Verifica el tipo de cliente: Expo Go solo para módulos del SDK, --dev-client después de expo run:*.
5. Presiona j para adjuntar React Native DevTools si la aplicación se carga pero se comporta incorrectamente.

• Hacer script de la matriz de banderas previene la divergencia de "funciona en mi máquina" entre compañeros de Expo Go y dev-client
• CLEAR_CACHE=1 como una variable de entorno de inclusión es mejor que siempre pasar --clear, que castiga cada inicio innecesariamente
• Mantén los caminos de go y dev explícitos - la detección automática del cliente instalado falla silenciosamente cuando ambas aplicaciones están en el dispositivo
• Cuando el paso 5 aún falla, captura logs de Metro y reproduce en el simulador (i) para separar los problemas de red de los defectos de JavaScript

Relacionado: React Native DevTools - adjuntar depurador después de que se carga el bundle | Flipper & Alternative Debuggers - inspección a nivel nativo cuando las herramientas de JS no son suficientes | Expo CLI Best Practices - convenciones del equipo y transferencia de CI

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (expo ~57.0.4).