Instalación y configuración de Expo CLI y emuladores

Concepto clave

Expo CLI es el motor de desarrollo que te permite crear, ejecutar y publicar aplicaciones React Native sin necesidad de configurar Xcode o Android Studio manualmente. Imagina que estás construyendo una casa: Expo CLI sería como el conjunto de herramientas eléctricas que te permiten trabajar más rápido, mientras que los emuladores son las maquetas a escala donde pruebas que todo funcione antes de construir la casa real.

La arquitectura de Expo se basa en un runtime compartido que abstrae las diferencias entre iOS y Android. Esto significa que escribes tu código una vez en JavaScript/TypeScript, y Expo se encarga de traducirlo a componentes nativos para cada plataforma. Es como tener un intérprete que habla tanto español como inglés simultáneamente.

Cómo funciona en la práctica

El flujo de trabajo típico con Expo sigue estos pasos:

1. Instalas Expo CLI globalmente en tu sistema
2. Creas un nuevo proyecto con una plantilla preconfigurada
3. Configuras un emulador (iOS Simulator o Android Emulator) o usas tu dispositivo físico
4. Ejecutas el proyecto y Expo se encarga de compilar y servir la aplicación
5. Realizas cambios en tu código y ves las actualizaciones en tiempo real

Expo maneja automáticamente las dependencias nativas, los certificados de firma y la configuración del entorno, lo que te permite enfocarte en el desarrollo de tu aplicación en lugar de la infraestructura.

Código en acción

Veamos cómo crear y ejecutar un proyecto básico. Primero, instala Expo CLI:

npm install -g expo-cli

Luego, crea un nuevo proyecto y ejecútalo:

# Crear nuevo proyecto
expo init MiPrimeraApp

# Navegar al directorio
cd MiPrimeraApp

# Iniciar el servidor de desarrollo
expo start

Al ejecutar expo start, verás un código QR y varias opciones. Para usar el emulador:

# En una terminal separada, después de iniciar expo start
# Para iOS Simulator
expo start --ios

# Para Android Emulator
expo start --android

Errores comunes

• Error: "Unable to resolve module": Suele ocurrir cuando hay problemas con las dependencias. Solución: Ejecuta expo doctor para diagnosticar y expo install --fix para corregir automáticamente.
• Emulador no detectado: Asegúrate de que el emulador esté ejecutándose antes de iniciar Expo. Para Android, verifica que ANDROID_HOME esté configurado correctamente.
• Problemas de permisos en macOS/Linux: Al instalar Expo CLI globalmente, podrías necesitar usar sudo o configurar correctamente los permisos de NPM.
• Versiones incompatibles de Node.js: Expo requiere Node.js 12 o superior. Verifica tu versión con node --version y actualiza si es necesario.
• Falta de espacio en disco: Los emuladores y las dependencias de iOS/Android pueden consumir varios GB. Asegúrate de tener al menos 10GB libres.

Checklist de dominio

• Expo CLI instalado globalmente y verificable con expo --version
• Capacidad de crear un nuevo proyecto con expo init sin errores
• Emulador de iOS o Android configurado y ejecutándose correctamente
• Proyecto Expo ejecutándose en el emulador con expo start --ios o expo start --android
• Entendimiento de cómo usar el código QR para ejecutar en dispositivo físico
• Capacidad de diagnosticar problemas comunes con expo doctor
• Conocimiento de las diferencias entre desarrollo local y en la nube con Expo

Configuración completa de entorno de desarrollo Expo

En este ejercicio, configurarás un entorno de desarrollo completo para React Native con Expo y crearás tu primera aplicación ejecutable en emulador.

1. Instalación de dependencias básicas:
   Verifica que tienes Node.js 12+ instalado. Si no, descárgalo desde nodejs.org. Luego instala Expo CLI globalmente.
2. Configuración de emulador:
   Elige una plataforma (iOS o Android) y configura el emulador correspondiente. Para iOS, necesitarás Xcode desde la Mac App Store. Para Android, descarga Android Studio y crea un dispositivo virtual.
3. Creación de proyecto:
   Crea un nuevo proyecto Expo usando la plantilla "blank" y nómbralo "MiAppPractica".
4. Ejecución en emulador:
   Inicia el proyecto y ábrelo en tu emulador configurado. Verifica que la pantalla de bienvenida de Expo se muestre correctamente.
5. Modificación básica:
   Abre App.js y cambia el texto de bienvenida por "Mi primera app con Expo". Guarda y verifica que los cambios se reflejen automáticamente en el emulador.

• Si el emulador no se inicia, verifica que la ruta de Android SDK esté configurada correctamente en las variables de entorno.
• Puedes usar 'expo start --clear' para limpiar la caché si encuentras problemas de carga.
• Para iOS Simulator en macOS, asegúrate de que Xcode esté instalado y que hayas aceptado los acuerdos de licencia desde la terminal.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.