Instalación y Configuración del Entorno de Desarrollo

Concepto clave

La instalación y configuración del entorno de desarrollo para React Native con Expo es el primer paso crítico para construir aplicaciones móviles nativas. Imagina que estás preparando un taller de carpintería: necesitas herramientas específicas (como sierras y martillos), un espacio organizado (tu banco de trabajo), y materiales de calidad (la madera). De manera similar, para desarrollar apps con React Native y Expo, necesitas instalar Node.js como base, Expo CLI como herramienta principal, y configurar tu editor de código (como VS Code) para optimizar el flujo de trabajo. Este entorno te permite escribir código una vez y ejecutarlo en dispositivos iOS y Android, aprovechando las capacidades nativas sin la complejidad de configurar Xcode o Android Studio desde el inicio.

Expo actúa como una capa de abstracción que simplifica el desarrollo, proporcionando un conjunto de herramientas y servicios preconfigurados. En lugar de lidiar directamente con las configuraciones nativas de cada plataforma, Expo maneja la compilación, el empaquetado y la ejecución, permitiéndote enfocarte en la lógica de tu aplicación. Es como usar un kit de construcción pre-diseñado en lugar de fabricar cada pieza desde cero. Para un desarrollador intermedio, entender esta configuración es esencial porque establece las bases para un desarrollo eficiente y libre de errores comunes relacionados con el entorno.

Cómo funciona en la práctica

Vamos a configurar el entorno paso a paso, asegurándonos de que todo esté listo para crear tu primera app. Sigue estos pasos en orden:

1. Verifica Node.js: Abre tu terminal y ejecuta node -v. Debes tener Node.js versión 18 o superior. Si no lo tienes, descárgalo desde nodejs.org e instálalo. Node.js es el motor que ejecuta JavaScript fuera del navegador, necesario para React Native.
2. Instala Expo CLI: En la terminal, ejecuta npm install -g expo-cli. Esto instala globalmente la interfaz de línea de comandos de Expo, que te permitirá crear y gestionar proyectos. Verifica la instalación con expo --version.
3. Configura tu editor: Si usas VS Code, instala las extensiones "React Native Tools" y "Expo Tools" desde el marketplace. Estas extensiones proporcionan autocompletado, depuración y soporte para Expo, mejorando tu productividad.
4. Crea un proyecto de prueba: Ejecuta expo init MiPrimeraApp, selecciona el template "blank" y espera a que se descarguen las dependencias. Esto genera una estructura básica de proyecto con todo configurado.
5. Ejecuta la app: Navega a la carpeta del proyecto con cd MiPrimeraApp y ejecuta expo start. Esto inicia el servidor de desarrollo y abre una interfaz en tu navegador. Escanea el código QR con la app Expo Go en tu dispositivo móvil para ver la app en tiempo real.

Código en acción

Una vez configurado el entorno, vamos a modificar el código inicial para personalizar la app. Abre el archivo App.js en tu proyecto y observa el contenido predeterminado. Aquí tienes un ejemplo funcional que cambia el mensaje y añade un estilo básico:

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

export default function App() {
  return (
    
      ¡Hola, Desarrollador!
      Tu entorno está listo para construir apps nativas.
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
});

Ahora, mejoremos este código refactorizando para hacerlo más modular. Crea un nuevo archivo llamado components/Greeting.js y mueve la lógica del saludo allí:

// components/Greeting.js
import { Text, StyleSheet } from 'react-native';

export default function Greeting({ name }) {
  return (
    
      ¡Bienvenido, {name}!
    
  );
}

const styles = StyleSheet.create({
  greeting: {
    fontSize: 22,
    color: '#2a9d8f',
    fontWeight: '600',
  },
});

Luego, actualiza App.js para usar este componente:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import Greeting from './components/Greeting';

export default function App() {
  return (
    
      
      
    
  );
}

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

Este cambio demuestra cómo estructurar tu código para escalabilidad, separando responsabilidades.

Errores comunes

• Error 1: Versión desactualizada de Node.js. Si usas una versión antigua de Node.js (como la 14 o inferior), Expo puede fallar al instalar dependencias. Solución: Actualiza a Node.js 18 o superior usando un gestor como nvm (Node Version Manager) o descargando la última versión desde nodejs.org.
• Error 2: Permisos insuficientes en la instalación global. Al ejecutar npm install -g expo-cli en sistemas Unix (macOS/Linux), puedes encontrar errores de permisos. Solución: Usa sudo npm install -g expo-cli o configura npm para instalar globalmente sin sudo (recomendado para seguridad).
• Error 3: Conflicto de puertos. Expo inicia un servidor en el puerto 19000 por defecto. Si otro servicio está usando ese puerto, verás errores de conexión. Solución: Cierra otras aplicaciones que usen el puerto o cambia el puerto de Expo con expo start --port 19001.
• Error 4: No tener Expo Go instalado en el dispositivo móvil. Para probar la app en un dispositivo físico, necesitas la app Expo Go (disponible en App Store o Google Play). Sin ella, no podrás escanear el código QR. Solución: Descarga Expo Go antes de iniciar el proyecto.
• Error 5: Olvidar instalar dependencias después de clonar un proyecto. Si clonas un proyecto existente desde Git, las dependencias no se incluyen. Ejecutar expo start fallará. Solución: Siempre ejecuta npm install o yarn install en la carpeta del proyecto primero.

Checklist de dominio

1. Node.js versión 18 o superior instalada y verificada con node -v.
2. Expo CLI instalada globalmente y funcionando (comprobado con expo --version).
3. Editor de código configurado con extensiones para React Native y Expo (ej., VS Code con React Native Tools).
4. Proyecto de Expo creado exitosamente usando expo init y ejecutado con expo start.
5. App Expo Go instalada en un dispositivo móvil y capaz de cargar el proyecto escaneando el código QR.
6. Capacidad de modificar el código en App.js y ver los cambios en tiempo real en el dispositivo.
7. Entendimiento de cómo solucionar errores comunes como conflictos de puertos o permisos.

Configura un entorno de desarrollo y crea una app de lista de tareas básica

Sigue estos pasos para aplicar lo aprendido y construir una app funcional desde cero:

1. Prepara el entorno: Asegúrate de tener Node.js 18+ y Expo CLI instalados. Si ya los tienes, verifica que funcionen correctamente.
2. Crea un nuevo proyecto: Abre tu terminal y ejecuta expo init ListaDeTareas. Selecciona el template "blank" y espera a que se complete la instalación.
3. Configura la estructura: Dentro del proyecto, crea una carpeta llamada components y un archivo TaskItem.js dentro de ella. Este componente mostrará una tarea individual.
4. Implementa el componente TaskItem: En TaskItem.js, crea un componente que acepte props como title y completed, y muestre un texto con un estilo que cambie si la tarea está completada (ej., tachado). Usa StyleSheet para los estilos.
5. Modifica App.js: En App.js, importa TaskItem y crea un array de tareas de ejemplo (ej., [{ title: "Aprender React Native", completed: false }, { title: "Configurar Expo", completed: true }]). Renderiza cada tarea usando TaskItem dentro de una lista.
6. Prueba la app: Ejecuta expo start en la terminal, escanea el código QR con Expo Go en tu dispositivo, y verifica que las tareas se muestren correctamente, con las completadas tachadas.
7. Documenta los pasos: Crea un archivo README.md en la raíz del proyecto con instrucciones breves sobre cómo ejecutar la app y qué hace cada componente.

Al final, deberías tener una app ejecutándose que muestre una lista de tareas con estado visual.

Pistas

• Usa map en JavaScript para iterar sobre el array de tareas en App.js y renderizar múltiples componentes TaskItem.
• En TaskItem.js, puedes usar la prop style condicionalmente: por ejemplo, textDecorationLine: completed ? 'line-through' : 'none' para tachar el texto.
• Si encuentras errores al importar TaskItem, verifica la ruta en el import: debe ser import TaskItem from './components/TaskItem' en App.js.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

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.

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.

• Abrir el cuaderno ilustrado de 7 páginas
• Descargar PDF, ejercicios y plantillas de esta ruta
• Expo: tutorial oficial · recurso externo