Lección 1 de 20 · Lectura y práctica

Instalar Expo: create-expo-app y emulador

Concepto clave Respuesta rápida: instalar Expo: para empezar un proyecto React Native actual, usá npx create-expo-app@latest, entrá a la carpeta y ejecutá npx expo start. Abrí Android con a, iOS con i en macOS o escaneá el QR con.

Del concepto a la práctica

Taller de esta lección

La instalación se entiende mejor como una prueba de entorno: crear el proyecto, iniciar el servidor y observar si el cliente elegido puede abrirlo. No confundas crear una app con disponer de un emulador configurado. Un teléfono físico, un emulador Android y un simulador iOS son rutas distintas para comprobar el mismo proyecto.

Ejemplo resuelto

Para una carpeta vacía, registra esta secuencia:

text

npx create-expo-app@latest agenda-local
cd agenda-local
npx expo start

Si el servidor inicia y muestra el menú de apertura, la creación fue correcta; si no hay emulador, todavía puedes validar el servidor sin afirmar que la app se ejecutó.

Pruébalo

Crea agenda-local.
Inicia Expo y anota el mensaje visible.
Intenta abrirlo en un destino disponible.
Cancela con la combinación indicada por la terminal.

Error frecuente: instalar una CLI global antigua y atribuirle el fallo. Corrige usando npx local y revisa el mensaje concreto.

Ejercicio: repite el flujo en otra carpeta, sin modificar archivos.

Comprueba tu resultado

dos proyectos independientes y un servidor que puede iniciarse en cada uno.

Entorno reproducible y entrada de la app

Registra Node LTS compatible, SDK del proyecto y lockfile. Para usar App.js como en estos ejercicios, crea una plantilla explícita: npx create-expo-app@latest agenda-local --template blank. La plantilla por defecto puede usar Expo Router: su entrada real se encuentra en las rutas, no en un App.js añadido al azar. Instala dependencias nativas con npx expo install y consulta su compatibilidad con ese SDK; no fuerces una versión de ejemplo antigua.

La CLI actual se ejecuta con npx expo start dentro del proyecto. Expo Go requiere un SDK compatible y solo incluye ciertas capacidades; dependencias nativas adicionales pueden requerir development build. Registra el puerto que muestra Metro, dispositivo, mensaje observado y dos arranques. Un QR visible demuestra servidor de desarrollo, no que la app haya abierto ni publicación. Detén tu servidor con Ctrl+C antes de iniciar otro; no cierres procesos ajenos para liberar un puerto. Plantillas.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista. — **Cómo avanza un programa**
Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.
Ver la infografía en tamaño completo ↗

Concepto clave

Respuesta rápida: instalar Expo: para empezar un proyecto React Native actual, usá npx create-expo-app@latest, entrá a la carpeta y ejecutá npx expo start. Abrí Android con a, iOS con i en macOS o escaneá el QR con Expo Go. No instales una CLI global antigua para proyectos nuevos.

Expo es una forma práctica de crear apps React Native sin configurar cada detalle nativo desde cero. Para aprender y construir portfolio, lo importante no es memorizar comandos viejos: es poder crear un proyecto, abrirlo en un teléfono o emulador, diagnosticar errores básicos y saber cuándo Expo Go deja de alcanzar.

Comandos actuales para instalar Expo

El flujo recomendado por la documentación actual es crear el proyecto con create-expo-app y ejecutar Expo CLI localmente con npx expo.

npx create-expo-app@latest mi-app
cd mi-app
npx expo start

Durante transiciones grandes de SDK, la documentación puede recomendar una plantilla explícita. Si necesitás crear un proyecto SDK 55, usá la plantilla indicada por Expo:

npx create-expo-app@latest --template default@sdk-55 mi-app

Si estás practicando con Expo Go, revisá que la versión del SDK sea compatible con la app Expo Go instalada en tu teléfono.

Cómo abrir la app después de instalar Expo

Entorno	Qué necesitás	Cómo abrir
Dispositivo real	Teléfono, Expo Go y misma red o tunnel	Escaneá el QR que aparece con `npx expo start`
Android Emulator	Android Studio y un virtual device iniciado	Presioná `a` en la terminal de Expo
iOS Simulator	macOS con Xcode instalado	Presioná `i` en la terminal de Expo
Development build	`expo-dev-client` y una build propia	Usala cuando el proyecto tiene módulos nativos o configuración personalizada

Expo Go o development build

Expo Go: sirve para aprender, prototipos rápidos y APIs incluidas en el SDK.
Development build: conviene para proyectos reales con módulos nativos, configuración propia, permisos complejos o pruebas cercanas a producción.
Rebuild: si agregás una librería con código nativo, reconstruí la development build para incluir ese módulo.

Errores comunes al instalar Expo

Instalar una CLI global antigua: evitá una CLI global antigua en proyectos nuevos. Usá npx expo dentro de la carpeta del proyecto.
Ejecutar el comando en la carpeta equivocada: después de crear la app, entrá con cd mi-app antes de correr npx expo start.
El emulador no abre: iniciá primero el virtual device desde Android Studio o verificá Xcode en macOS.
El QR no conecta: probá misma red Wi-Fi, modo tunnel o cable USB si la red bloquea conexiones locales.
Una librería funciona en docs pero falla en Expo Go: revisá si requiere development build.

Checklist de dominio

Tenés Node LTS instalado y podés correr node --version.
Podés crear un proyecto con npx create-expo-app@latest mi-app.
Podés iniciar el servidor con npx expo start.
Podés abrir la app en Expo Go, Android Emulator o iOS Simulator.
Sabés explicar cuándo usar Expo Go y cuándo crear una development build.
Podés limpiar caché con npx expo start --clear cuando el bundler queda inconsistente.

Ejercicio práctico de portfolio

Creá una app mínima llamada mi-app, abrila en un teléfono o emulador y dejá evidencia técnica en GitHub.

Creá el proyecto con npx create-expo-app@latest mi-app.
Agregá una pantalla inicial con tu nombre, objetivo de la app y una segunda sección navegable.
Probala en Android Emulator, iOS Simulator o Expo Go.
Escribí un README con comandos de instalación, entorno usado y errores resueltos.
Sumá capturas de pantalla para mostrarlo en entrevistas junior React Native.

Diagnóstico rápido cuando no carga

Confirmá que estás dentro de la carpeta del proyecto.
Corré npx expo start --clear si el bundler muestra módulos viejos.
Revisá que el emulador esté encendido antes de presionar a.
Si una API nativa no existe en Expo Go, migrá a development build.
Si el teléfono no conecta por QR, probá tunnel desde las opciones de Expo CLI.

De instalar Expo a empleo real

Para trabajo React Native, instalar Expo es solo el inicio. Convertí esta lección en una pieza de portfolio: app mínima, README claro, screenshots, comandos reproducibles y una nota honesta sobre si usaste Expo Go o development build.

Conectá este ejercicio con rutas de empleos tech.
Explorá más cursos de React Native.
Ofrecé servicios chicos en el marketplace de profesionales: setup de app, debugging de emulador, permisos o migración de Expo Go a development build.

Fuentes oficiales

Esta lección sigue la documentación oficial de Expo para create-expo-app, npx expo start y development builds.

Práctica acompañada: Una app que cabe en tu día

Un proyecto pequeño con React Native y Expo. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Un proyecto pequeño con React Native y Expo: Pantalla, Acción, Permiso, Dispositivo — De la idea al resultado: una secuencia para practicar y revisar.

Práctica: prueba en cuatro condiciones

Completa el flujo con una imagen vertical, una horizontal, cancelando el selector y negando el permiso. Comprueba que la aplicación conserva proporciones y que ningún control queda fuera de alcance. Repite al volver del fondo y al cambiar el tamaño del texto.

Si tu proyecto permite guardar la imagen, verifica por separado el permiso y el resultado de guardado. No muestres «Guardado» antes de que la operación termine. Usa archivos de prueba propios. Para comparar versiones, conserva capturas con el mismo dispositivo, orientación y tamaño de letra.

Comprueba tu entrega

Entrega el repositorio con instrucciones, la lista de versiones y la matriz de dispositivos. Incluye una captura de cada estado y un video propio breve que muestre el recorrido entero, incluida la cancelación. No hace falta publicar una app para demostrar este aprendizaje.

Sigue con React Native y Expo: Interfaces, Estado y APIs de Dispositivo

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

Siguiente: Estructura de proyectos Expo y navegación básica →Entrar y guardar mi progreso