Configuración de entorno de desarrollo para React Native con Expo

Aprende, paso a paso, a preparar el entorno de desarrollo para crear una app móvil con React Native usando Expo, comprobando Node y NPX/NPM, y ejecutándola en Expo Go, Android Studio o el iOS simulator. Conoce los comandos clave, la estructura del proyecto y recomendaciones prácticas para un despliegue fluido.

¿Qué es React Native y por qué acelera el desarrollo móvil?

React Native permite crear aplicaciones nativas para iOS y Android con JavaScript. Comparte conceptos con React, pero incorpora funcionalidades específicas del entorno móvil. Además, su estructura recuerda a HTML y estilos tipo CSS, lo que reduce la curva de aprendizaje si ya dominas la web.

• Compatibilidad nativa: una sola base de código para iOS y Android.
• Parentesco con React: componentes y lógica similares.
• Estructuras tipo HTML y CSS: aprendizaje más rápido.

¿Cómo preparar el entorno con Node, NPX/NPM y Expo?

Antes de “cocinar”, prepara los “ingredientes”: instala y verifica Node (motor de JavaScript), usa NPX/NPM (gestor de paquetes) y valida que Expo esté listo para desplegar y emular tu app. Crea una carpeta del proyecto desde tu explorador de archivos y ábrela en Visual Studio Code para trabajar con comodidad.

¿Cómo verificar instalaciones con comandos?

Comprueba versiones e integridad del entorno desde la terminal. Si falta algo, instálalo siguiendo las indicaciones mencionadas por la instructora.

# Versión de Node
node -v

# Salud del entorno y del proyecto con Expo n
npx expo doctor

# Instala dependencias faltantes sugeridas por Expo ex
expo install check

• Objetivo de node -v: confirmar que Node está instalado y su versión.
• Objetivo de expo doctor: detectar si hay paquetes o configuraciones faltantes.
• Objetivo de expo install check: instalar dependencias sugeridas por Expo si hay errores.

¿Cómo crear el proyecto con Expo, router y TypeScript?

Se ejecuta un comando de creación con Expo para generar la base de TypeScript y el Expo router. El nombre de la app se define al final del comando (ejemplo: “Hábitos App”). La estructura del comando se compone de: gestor de paquetes, qué instalar (app con Expo en su última versión) y nombre del proyecto.

• Nombre del proyecto: se sugiere “Hábitos App”, pero puedes personalizarlo.
• Base técnica: TypeScript y Expo router incluidos desde el inicio.
• Organización: crea la carpeta y ábrela en Visual Studio Code para trabajar.

Para entrar a la carpeta del proyecto:

cd "Hábitos App"

¿Cómo analizar la salud del proyecto con Expo doctor?

Dentro de la carpeta del proyecto, ejecuta el chequeo. Si no hay “issues”, estás listo para correr la app. Si aparecen errores, instala lo faltante con el comando indicado anteriormente.

• Validación rápida: usar “doctor” evita problemas al ejecutar.
• Corrección guiada: instala paquetes faltantes cuando se te solicite.

¿Cómo ejecutar la app en Expo Go, Android Studio y iOS simulator?

Con el entorno validado, inicia el servidor de desarrollo y el empaquetador Metro para probar la app. Puedes abrirla en tu dispositivo con Expo Go, en un emulador de Android Studio o en el iOS simulator (requiere Mac).

¿Cómo iniciar el servidor y empaquetar con Metro?

Inicia el servidor y el empaquetador para cargar la app en el dispositivo o emulador.

expo start

• Empaquetador Metro: crea el “bundle” para ejecutar la app en iOS o Android.
• Arranque rápido: opciones de apertura por QR, emulador Android o simulador iOS.

¿Cómo abrir en Expo Go con un código QR?

Instala Expo Go en tu móvil, inicia sesión como desarrollador, y escanea el QR que aparece en la terminal o el navegador al ejecutar el servidor.

• Misma red: conecta laptop y móvil a la misma red wifi.
• Plantilla inicial: verás la pantalla por defecto generada por Expo.
• Prueba inmediata: cambios en el código se reflejan rápido.

¿Cómo usar emuladores Android e iOS desde la terminal?

Puedes lanzar los emuladores directamente con teclas rápidas mientras el servidor está activo.

# Abrir emulador de Android (con Android Studio instalado)
a

# Abrir iOS simulator (requiere Mac)
i

• Android Studio: abre el proyecto y usa un emulador; la terminal se conecta al instante.
• iOS simulator: disponible en Mac; muestra la misma plantilla inicial.
• Experiencia equivalente: verás lo mismo en Expo Go, Android y iOS.

Habilidades que fortaleces durante el proceso: - Configuración de entorno: instalación y verificación de Node, NPX/NPM y Expo. - Uso de CLI: ejecución de comandos para crear, validar y correr la app. - Diagnóstico rápido: interpretación de salidas de “doctor” e instalación de dependencias. - Despliegue multiplataforma: apertura en Expo Go, Android Studio y iOS simulator. - Organización de proyecto: creación de carpetas y trabajo en Visual Studio Code.

¿Te quedó alguna duda del flujo con Expo, los comandos o los emuladores? Cuéntala en los comentarios y comparte en qué entorno piensas ejecutar tu primera app de hábitos.