Crear tu primera app con componentes nativos

Tipo de lección: Video

Concepto clave

Crear tu primera app con componentes nativos en React Native con Expo es como construir una casa usando piezas prefabricadas que funcionan tanto en iOS como en Android. En lugar de escribir código específico para cada plataforma, usas componentes como View, Text, y Button que Expo traduce automáticamente a elementos nativos. Esto es similar a cómo un arquitecto diseña un plano que luego se adapta a diferentes terrenos sin cambiar la estructura básica.

Los componentes nativos son bloques de construcción que representan elementos visuales en la pantalla, como contenedores, texto o botones. A diferencia del desarrollo web, donde usas HTML y CSS, aquí escribes en JavaScript, pero el resultado es una app verdaderamente nativa. Imagina que estás ensamblando muebles modulares: cada pieza (componente) tiene una función específica, y al combinarlas, creas una interfaz completa que se siente natural en cualquier dispositivo móvil.

Cómo funciona en la práctica

Para crear tu primera app, sigue estos pasos usando Expo. Primero, asegúrate de tener Node.js instalado y ejecuta npx create-expo-app MiPrimeraApp en tu terminal. Esto genera un proyecto básico con una estructura lista para usar. Luego, navega a la carpeta del proyecto y abre el archivo App.js. Aquí es donde escribirás tus componentes.

En React Native, todo comienza con un componente principal que renderiza otros componentes. Por ejemplo, un View actúa como un contenedor (similar a un div en HTML), y dentro colocas Text para mostrar texto. Usa StyleSheet para aplicar estilos, como colores o márgenes, de manera similar a CSS pero con sintaxis de JavaScript. Para ver los cambios en tiempo real, ejecuta npx expo start y escanea el código QR con la app Expo Go en tu teléfono.

Código en acción

Aquí tienes un ejemplo funcional de una app simple que muestra un saludo y un botón. Copia este código en tu App.js para empezar:

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

export default function App() {
  const handlePress = () => {
    Alert.alert('¡Hola!', 'Has presionado el botón.');
  };

  return (
    
      ¡Bienvenido a React Native!
      Esta es tu primera app con componentes nativos.
      
    
  );
}

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

Ahora, mejoremos este código agregando un componente personalizado. En lugar de tener todo en App.js, crea un archivo separado para reutilizar código:

// Saludo.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';

export default function Saludo({ nombre }) {
  return (
    ¡Hola, {nombre}!
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

// App.js (actualizado)
import React from 'react';
import { StyleSheet, View, Button, Alert } from 'react-native';
import Saludo from './Saludo';

export default function App() {
  const handlePress = () => {
    Alert.alert('Acción', 'Botón presionado con éxito.');
  };

  return (
    
      
      
    
  );
}

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

Errores comunes

• No cerrar etiquetas correctamente: En JSX, todos los componentes deben cerrarse, ya sea con una etiqueta de cierre (ej., <Text>...</Text>) o autoclausura (ej., <Button />). Si olvidas esto, obtendrás errores de sintaxis.
• Usar estilos inline en exceso: Aplicar estilos directamente en los componentes (ej., style={{ color: 'red' }}) puede hacer el código difícil de mantener. En su lugar, define estilos con StyleSheet.create para mejor rendimiento y claridad.
• Ignorar la importación de componentes Asegúrate de importar todos los componentes de 'react-native' (ej., import { View, Text } from 'react-native'). Si falta uno, la app fallará.
• No probar en ambos dispositivos: Los componentes pueden verse diferente en iOS y Android. Usa Expo Go para probar en un iPhone y un Android reales, no solo en el simulador.
• Olvidar manejar eventos: Los componentes como Button requieren una prop onPress. Si no la defines, el botón no hará nada y podrías pensar que está roto.

Checklist de dominio

1. Crear un proyecto Expo desde cero usando npx create-expo-app.
2. Escribir un componente funcional que use al menos tres componentes nativos (ej., View, Text, Button).
3. Aplicar estilos con StyleSheet.create para cambiar colores, fuentes y diseño.
4. Manejar un evento simple, como un clic en un botón que muestre una alerta.
5. Refactorizar código extrayendo un componente personalizado a un archivo separado.
6. Probar la app en un dispositivo físico usando Expo Go.
7. Verificar que la app se renderice correctamente tanto en iOS como en Android.

Crear una app de lista de tareas con componentes nativos

En este ejercicio, construirás una app simple de lista de tareas usando componentes nativos de React Native. Sigue estos pasos:

1. Crea un nuevo proyecto Expo ejecutando npx create-expo-app ListaTareas en tu terminal y navega a la carpeta del proyecto.
2. Abre App.js y reemplaza el contenido con un componente que muestre un título "Mis Tareas" usando Text dentro de un View.
3. Agrega un array de tareas (ej., ['Comprar leche', 'Estudiar React Native', 'Hacer ejercicio']) y usa map para renderizar cada tarea como un elemento Text en una lista.
4. Implementa un botón que agregue una nueva tarea (puede ser una tarea fija como 'Nueva tarea') al array cuando se presione. Usa el hook useState para manejar el estado de las tareas.
5. Aplica estilos con StyleSheet.create para que el título sea grande y en negrita, y las tareas tengan un margen y color diferenciado.
6. Prueba la app en tu dispositivo con Expo Go y verifica que las tareas se muestren y que el botón agregue nuevas.

Pistas

• Usa useState para manejar el array de tareas y actualizarlo al presionar el botón.
• Recuerda que en React Native, no tienes elementos li; en su lugar, renderiza cada tarea dentro de un Text o View separado.
• Para mejorar la UI, considera agregar un ScrollView si la lista de tareas crece demasiado.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.