Creación de tu primera app con Expo Go y estructura de proyecto

Concepto clave

Crear tu primera app con Expo Go es como construir una casa prefabricada: en lugar de empezar desde cero con cimientos complicados, usas un kit que ya tiene la estructura básica lista. Expo Go es la aplicación que te permite ejecutar y probar tu código React Native directamente en tu dispositivo móvil sin necesidad de configurar entornos de desarrollo nativos para iOS o Android. Esto acelera el proceso de desarrollo, similar a cómo un arquitecto puede visualizar un modelo 3D antes de construir.

La estructura de proyecto en Expo sigue convenciones que organizan tu código de manera escalable. Piensa en ella como el plano de esa casa: tienes habitaciones (componentes), tuberías (dependencias) y conexiones eléctricas (navegación). Comprender esta estructura desde el inicio te evitará dolores de cabeza más adelante, especialmente cuando tu app crezca y necesites agregar nuevas funcionalidades.

Cómo funciona en la práctica

Para crear tu primera app, sigue estos pasos:

1. Abre tu terminal y ejecuta npx create-expo-app MiPrimeraApp. Esto genera un proyecto básico con todo lo necesario.
2. Navega a la carpeta del proyecto con cd MiPrimeraApp.
3. Inicia el servidor de desarrollo con npx expo start. Verás un código QR en la terminal.
4. Descarga la app Expo Go en tu teléfono (disponible en App Store o Google Play) y escanea el QR. ¡Tu app se ejecutará en tiempo real!

La estructura generada incluye archivos clave: App.js (el punto de entrada), package.json (dependencias), y carpetas como assets para imágenes. Esta configuración te permite enfocarte en escribir código en lugar de perder tiempo con configuraciones.

Código en acción

Aquí tienes el código inicial de App.js que Expo genera por defecto. Es un componente funcional simple que muestra un texto y una imagen:

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

export default function App() {
  return (
    
      ¡Hola, mundo desde Expo!
      
    
  );
}

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

Ahora, mejoremos este código agregando un botón interactivo. Refactoriza App.js para incluir un estado y manejar un clic:

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

export default function App() {
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  return (
    
      Contador: {contador}
      
      
    
  );
}

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

Errores comunes

• No tener Expo Go instalado en el dispositivo: Asegúrate de descargar la app desde la tienda oficial antes de escanear el QR. Sin ella, no podrás probar tu proyecto.
• Olvidar ejecutar npx expo start en la carpeta correcta: Si no estás en la raíz del proyecto, el servidor no iniciará. Verifica con ls o dir que veas App.js.
• Ignorar las advertencias de dependencias: Expo actualiza frecuentemente; ejecuta npx expo install --fix para resolver conflictos y mantener compatibilidad.
• Modificar la estructura base innecesariamente: Evita mover archivos como app.json o babel.config.js sin razón, ya que pueden romper la configuración de Expo.
• No probar en ambos iOS y Android: Usa Expo Go en diferentes dispositivos para asegurar que tu app funcione correctamente en ambas plataformas.

Checklist de dominio

• Crear un proyecto Expo desde cero usando create-expo-app.
• Iniciar el servidor de desarrollo y conectar un dispositivo con Expo Go.
• Identificar los archivos clave en la estructura del proyecto (App.js, package.json, assets).
• Modificar el componente App para agregar interactividad básica (ej., un botón).
• Resolver un error común como una dependencia desactualizada.
• Explicar la diferencia entre desarrollo con Expo Go y un build nativo.
• Organizar el código en carpetas lógicas para escalabilidad.

Crea una app de lista de tareas básica con Expo Go

En este ejercicio, construirás una app simple de lista de tareas que permita agregar y mostrar items. Sigue estos pasos:

1. Crea un nuevo proyecto Expo llamado TodoApp usando npx create-expo-app TodoApp.
2. Navega a la carpeta y abre App.js. Reemplaza el contenido con un componente que incluya:
   • Un estado para almacenar un array de tareas (strings).
   • Un campo de texto (TextInput) y un botón para agregar tareas.
   • Una lista (FlatList o ScrollView) que muestre las tareas.
3. Implementa la lógica para agregar una tarea al array cuando se presione el botón.
4. Estiliza la app con StyleSheet para que sea legible (ej., márgenes, colores).
5. Ejecuta npx expo start y prueba la app en tu dispositivo con Expo Go.
6. Verifica que las tareas persistan durante la sesión (no es necesario almacenamiento permanente).

• Usa useState para manejar el array de tareas y el valor del TextInput.
• Importa TextInput y FlatList desde 'react-native'.
• Para agregar una tarea, concatena el nuevo item al array existente usando el setter del estado.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.