Instalación de Node, Expo CLI y simuladores
Configure Node.js y Expo CLI, y configure iOS Simulator o Android Emulator para poder ejecutar aplicaciones de React Native localmente.
Instalación de Node, Expo CLI y simuladores es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.
Por qué Node.js Potencia React Native
React Native se ejecuta en Node.js; este impulsa el empaquetador Metro que convierte tu JSX en una aplicación. Instala la versión LTS para mayor estabilidad, idealmente a través del administrador de versiones nvm.
# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Then install the latest LTS Node
nvm install --lts
nvm use --lts
# Verify installation
node --version # e.g. v20.12.0
npm --version # e.g. 10.5.0Instalando Expo CLI
El Expo CLI te permite crear, ejecutar y compilar aplicaciones sin tocar código nativo. Combínalo con la aplicación Expo Go para escanear un código QR y ver tu aplicación en un teléfono real al instante.
# Install Expo CLI globally
npm install -g expo-cli
# Verify the installation
expo --version
# Alternatively, use npx (no global install needed)
npx create-expo-app --versionConfiguración del Simulador de iOS en macOS
Para el simulador de iOS necesitas un Mac con Xcode instalado. Abre Xcode una vez para aceptar su licencia, luego añade las herramientas de línea de comandos. Expo puede iniciar un simulador con una sola pulsación de tecla.
# Install Xcode Command Line Tools
xcode-select --install
# Open a simulator from the terminal
open -a Simulator
# List available simulator devices
xcrun simctl list devicesConfiguración del Emulador de Android
Para Android necesitas Android Studio. Instala el SDK y el emulador, crea un dispositivo Pixel virtual y configura la variable ANDROID_HOME para que Expo pueda encontrar todo. Consulta el código.
# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Reload shell config
source ~/.zshrc
# Verify adb is found
adb --versionEntendiendo el Metro Bundler
Al iniciar un proyecto se lanza Metro, el bundler que observa tus archivos y recarga al instante con Fast Refresh. Si las cosas no se actualizan, limpia su caché con la flag --clear.
# Start Metro and clear cache
npx expo start --clear
# Metro outputs a QR code and key shortcuts:
# i → open iOS Simulator
# a → open Android Emulator
# r → reload the app
# m → toggle the developer menuJava Development Kit para Android
Las compilaciones de Android necesitan un Java Development Kit — Expo recomienda JDK 17. Instálalo, luego ejecuta java --version para confirmar que está en tu PATH. El código lo instala a través de Homebrew.
# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17
# Verify Java version
java --version
# Expected: openjdk 17.x.x
# On Windows: download installer from
# https://adoptium.net/temurin/releases/Verificando tu Configuración Completa
Una vez que todo esté instalado, ejecuta npx expo-env-info (o react-native doctor) para escanear tu configuración. Señala cualquier cosa que falte, así que corrige esos problemas antes de tu primer proyecto.
# Check your environment with Expo
npx expo-env-info
# Or use the React Native community CLI doctor
npx react-native doctor
# Install Watchman for better file watching (macOS)
brew install watchmanWatchman: Monitoreo de Archivos Más Rápido
Watchman es un observador de archivos de Facebook que hace que Metro detecte los cambios mucho más rápido, especialmente en macOS. Instálalo a través de Homebrew antes de empezar a compilar.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allVariables de Entorno y PATH
Muchos dolores de cabeza de configuración se deben a una entrada PATH faltante — tu shell no puede encontrar adb o el emulador. Añade las rutas a ~/.zshrc, luego recárgalo. El código muestra exactamente qué.
# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Apply changes
source ~/.zshrcApp Expo Go en un Dispositivo Real
La forma más rápida de probar en un teléfono real es la aplicación Expo Go. Ejecuta expo start, luego escanea el código QR, y tu aplicación se carga a través de Wi-Fi. Perfecto para un desarrollo rápido. 📱
# Start Expo development server
npx expo start
# Expo prints a QR code in the terminal.
# Scan it with:
# iOS: Camera app → tap the banner
# Android: Expo Go app → Scan QR Code
# Or press 's' to switch to Expo Go mode
# if using a dev build by defaultResolución de Problemas Comunes de Configuración
La mayoría de los problemas de configuración son predecibles: un puerto 8081 ocupado, una caché de Metro obsoleta, la versión incorrecta de Node o una ANDROID_HOME faltante. Y siempre lee la pantalla de error roja con atención.
# Common fixes
# Clear Metro cache
npx expo start --clear
# Kill process on port 8081
lsof -ti:8081 | xargs kill -9
# Check connected Android devices
adb devices
# Restart adb server if devices not showing
adb kill-server
adb start-serverComprobación Rápida
Pon a prueba tu comprensión de los conceptos de Desarrollo Móvil con React Native de esta lección.
Resumen de la Lección
Has construido tu conjunto de herramientas: Node y nvm ejecutan el JavaScript, Expo CLI genera la estructura (scaffolds) y sirve tu aplicación, y Watchman más los SDKs impulsan los simuladores. Siguiente: ¡tu primer proyecto! 🎉
Preguntas frecuentes
¿La lección «Instalación de Node, Expo CLI y simuladores» es gratis?
Sí — el texto completo de «Instalación de Node, Expo CLI y simuladores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Instalación de Node, Expo CLI y simuladores»?
Configure Node.js y Expo CLI, y configure iOS Simulator o Android Emulator para poder ejecutar aplicaciones de React Native localmente. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Native Academy?
No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Instalación de Node, Expo CLI y simuladores»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Native Academy?
Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Instalación de Node, Expo CLI y simuladores
- Creación de su primer proyecto de Expo
- Ejecución en dispositivos y emuladores
- Comprensión de la estructura del proyecto