Instalación y configuración de Expo CLI y entorno de desarrollo

Concepto clave

Expo CLI es el interfaz de línea de comandos que actúa como el control central para crear, desarrollar y desplegar aplicaciones React Native. Imagina que estás construyendo una casa: Expo CLI sería el arquitecto que te proporciona los planos, las herramientas y los permisos necesarios, mientras que React Native es el material de construcción. Sin Expo, tendrías que configurar manualmente Xcode para iOS y Android Studio para Android, un proceso que puede llevar horas y es propenso a errores. Expo abstrae esta complejidad, permitiéndote escribir código JavaScript que se compila en aplicaciones nativas para ambas plataformas.

El entorno de desarrollo con Expo se basa en tres componentes principales: el CLI para comandos locales, el cliente Expo Go en tu dispositivo móvil para pruebas en tiempo real, y los servicios en la nube para builds de producción. Esto crea un flujo de trabajo donde puedes ver cambios instantáneamente sin recompilar la app, similar a cómo un diseñador web usa Live Reload en el navegador. Para desarrolladores intermedios, entender esta arquitectura es crucial porque afecta cómo depuras, pruebas y escalas tus proyectos.

Cómo funciona en la práctica

Vamos a configurar Expo CLI desde cero. Primero, necesitas Node.js instalado (versión 16 o superior). Abre tu terminal y ejecuta el siguiente comando para instalar Expo CLI globalmente:

npm install -g expo-cli

Una vez instalado, crea un nuevo proyecto con:

expo init MiPrimeraApp

Selecciona la plantilla "blank" para empezar con lo básico. Esto generará una estructura de carpetas con archivos clave como App.js (el punto de entrada), package.json (dependencias) y app.json (configuración de Expo). Luego, inicia el servidor de desarrollo:

cd MiPrimeraApp
expo start

Esto abrirá una interfaz en tu navegador con un código QR. Escanéalo con la app Expo Go en tu teléfono (disponible en App Store o Google Play) para ver la app en vivo. Cualquier cambio en App.js se reflejará automáticamente en tu dispositivo, gracias al Hot Reloading de Expo.

Código en acción

Aquí tienes un ejemplo funcional de App.js que demuestra cómo Expo maneja componentes básicos. Antes de modificar, el código por defecto muestra solo un texto:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    
      Open up App.js to start working on your app!
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Después de refactorizar, añadimos un botón interactivo y un estado simple:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    
      Contador: {count}
      
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    marginBottom: 20,
  },
});

Este código usa Hooks de React (useState) y componentes nativos de React Native. Al guardar, verás el cambio inmediato en tu dispositivo gracias a Expo.

Errores comunes

• Error de permisos en instalación: Al ejecutar npm install -g expo-cli, si recibes un error de permisos, usa sudo en macOS/Linux o ejecuta PowerShell como administrador en Windows. Mejor aún, configura npm para instalar globalmente sin sudo con npm config set prefix ~/.npm-global.
• Problemas con Node.js versiones antiguas: Expo CLI requiere Node.js 16+. Verifica con node -v y actualiza si es necesario usando un gestor como nvm.
• QR no escaneable en Expo Go: Asegúrate de que tu teléfono y computadora estén en la misma red Wi-Fi. Si persiste, en la interfaz de Expo en el navegador, cambia a "Tunnel" en lugar de "LAN".
• Errores de dependencias tras crear proyecto: Si al iniciar con expo start hay errores de módulos, ejecuta npm install o yarn install en la carpeta del proyecto para reinstalar dependencias.
• Configuración incorrecta de app.json: No modifiques app.json sin entender las claves; un error común es cambiar "slug" a un nombre con espacios, lo que causa fallos en builds. Usa solo minúsculas y guiones.

Checklist de dominio

1. He instalado Expo CLI globalmente y verificado con expo --version.
2. He creado un proyecto nuevo usando expo init y seleccionado una plantilla apropiada.
3. He iniciado el servidor de desarrollo con expo start y escaneado el QR con Expo Go en mi dispositivo.
4. He modificado App.js para añadir un componente interactivo y visto los cambios en tiempo real.
5. He revisado la estructura de carpetas y entendido el propósito de archivos como package.json y app.json.
6. He solucionado al menos un error común (ej., permisos o red) durante la configuración.
7. Puedo explicar la diferencia entre Expo CLI y React Native en términos de flujo de trabajo.

Configura un proyecto Expo con navegación básica

En este ejercicio, crearás una app Expo con dos pantallas y navegación entre ellas, simulando un caso real como una app de perfil y configuración.

1. Crea un nuevo proyecto Expo llamado AppNavegacion usando el comando expo init y selecciona la plantilla "blank".
2. Instala la librería de navegación más común para Expo: npm install @react-navigation/native @react-navigation/stack y luego expo install react-native-screens react-native-safe-area-context.
3. Crea dos componentes en la carpeta del proyecto: PantallaPerfil.js y PantallaConfig.js, cada uno con un texto simple que identifique la pantalla.
4. En App.js, configura un navegador de pila (Stack Navigator) que incluya ambas pantallas. Usa createStackNavigator de @react-navigation/stack.
5. Añade un botón en PantallaPerfil que navegue a PantallaConfig usando navigation.navigate, y otro en PantallaConfig para volver.
6. Ejecuta expo start y prueba la navegación en tu dispositivo con Expo Go. Verifica que puedas moverte entre pantallas sin errores.

Pistas

• Recuerda envolver tu app con en App.js para que la navegación funcione.
• Usa el hook useNavigation en los componentes para acceder a la prop navigation si no se pasa directamente.
• Si ves errores de módulos, reinicia el servidor Expo después de instalar dependencias.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.