Quiz: Fundamentos de React Native y Expo

Tipo de lección: Quiz

Concepto clave

React Native con Expo es un framework que permite desarrollar aplicaciones móviles nativas para iOS y Android utilizando JavaScript y React. A diferencia de las aplicaciones web, React Native compila componentes en elementos nativos de cada plataforma, lo que resulta en un rendimiento similar al de aplicaciones desarrolladas con Swift o Kotlin. Expo actúa como una capa de abstracción que simplifica la configuración, proporcionando herramientas como el cliente Expo Go para probar aplicaciones directamente en dispositivos físicos sin necesidad de configurar entornos complejos de desarrollo nativo.

Imagina que estás construyendo una casa: React Native sería como usar un sistema de construcción modular que funciona tanto para casas de madera (iOS) como de ladrillo (Android), mientras que Expo sería el equipo de arquitectos que te proporciona planos predefinidos y herramientas para evitar tener que aprender cada detalle de construcción desde cero. Esto acelera el desarrollo y reduce la barrera de entrada, permitiendo a desarrolladores web expandir sus habilidades al mundo móvil con una curva de aprendizaje manejable.

Cómo funciona en la práctica

El flujo de trabajo típico comienza con la creación de un proyecto usando la CLI de Expo. Una vez inicializado, puedes escribir componentes React que se traducen a vistas nativas. Por ejemplo, un componente View en React Native se convierte en una UIView en iOS y en un android.view en Android. Expo maneja automáticamente la configuración de permisos, iconos y builds, permitiéndote enfocarte en la lógica de la aplicación.

Paso a paso: primero, instalas Expo CLI globalmente con npm install -g expo-cli. Luego, creas un nuevo proyecto con expo init MiApp. Esto genera una estructura básica con archivos como App.js, donde defines tu componente principal. Usas expo start para iniciar el servidor de desarrollo, que genera un código QR que puedes escanear con la app Expo Go en tu teléfono para ver los cambios en tiempo real. A medida que desarrollas, Expo gestiona las dependencias y actualizaciones, facilitando iteraciones rápidas.

Código en acción

Aquí tienes un ejemplo básico de un componente funcional en React Native con Expo que muestra un saludo y un botón:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  const [mensaje, setMensaje] = React.useState('Hola Mundo');

  const cambiarMensaje = () => {
    setMensaje('¡Hola desde React Native con Expo!');
  };

  return (
    
      {mensaje}
      
    
  );
}

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

Refactorización para mejorar la legibilidad: en lugar de definir estilos inline, podemos extraerlos a un archivo separado o usar constantes. Aquí está el "antes y después":

Antes (estilos inline, menos mantenible):

// En el componente

  Texto

Después (usando StyleSheet, más eficiente y organizado):

// Definido fuera del componente
const styles = StyleSheet.create({
  contenedor: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  texto: { fontSize: 20 },
});

// En el componente

  Texto

Errores comunes

• No probar en ambos dispositivos: iOS y Android pueden renderizar componentes de forma diferente; siempre verifica en emuladores o dispositivos reales de ambas plataformas.
• Olvidar manejar permisos: Expo simplifica esto, pero aún necesitas configurar permisos como cámara o ubicación en app.json; omisión puede causar fallos en producción.
• Uso excesivo de librerías de terceros: Añadir muchas dependencias puede aumentar el tamaño de la app y causar conflictos; evalúa si son necesarias y mantén un bundle optimizado.
• Ignorar el ciclo de vida de componentes: En React Native, componentes como useEffect deben manejarse correctamente para evitar memory leaks, especialmente en apps con navegación compleja.
• No optimizar imágenes: Imágenes grandes sin compresión ralentizan la app; usa herramientas como expo-optimize o servicios de CDN para assets.

Checklist de dominio

1. Puedo inicializar un proyecto de Expo y ejecutarlo en un dispositivo físico usando Expo Go.
2. Comprendo la diferencia entre componentes de React Native (ej., View, Text) y sus equivalentes nativos.
3. Sé configurar permisos básicos en app.json para funcionalidades como notificaciones o cámara.
4. Puedo depurar errores comunes usando las herramientas de desarrollo de React Native y los logs de Expo.
5. He refactorizado código para usar StyleSheet en lugar de estilos inline, mejorando el rendimiento.
6. Puedo explicar cómo Expo maneja builds y publicaciones para App Store y Google Play.
7. Sé integrar una API simple en mi app y manejar estados con useState o useContext.

Crear una app de lista de tareas con Expo y React Native

En este ejercicio, desarrollarás una aplicación móvil básica de lista de tareas que permita agregar y eliminar items. Sigue estos pasos:

1. Crea un nuevo proyecto Expo usando el comando expo init ListaTareas y selecciona el template en blanco (blank).
2. Abre el archivo App.js y reemplaza su contenido con un componente funcional que incluya:
   • Un estado inicial con un array de tareas (ej., [{ id: 1, text: 'Aprender React Native' }]).
   • Un TextInput para agregar nuevas tareas y un Button que al presionar añada la tarea al estado.
   • Una FlatList que muestre cada tarea como un Text con un Button para eliminarla.
3. Estiliza la app usando StyleSheet para que sea visualmente clara, con colores diferenciados para tareas completadas.
4. Prueba la app en tu dispositivo físico escaneando el código QR generado por expo start.
5. Agrega validación para evitar tareas vacías y maneja errores básicos en la interfaz.

Objetivo: Al final, tendrás una app funcional que demuestra el manejo de estado, listas y interacción de usuario en React Native con Expo.

Pistas

• Usa useState para manejar el array de tareas y el texto del input.
• FlatList requiere una keyExtractor; usa el id de cada tarea para optimizar el rendimiento.
• Para eliminar una tarea, filtra el array de estado basado en el id.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.