Introducción al Desarrollo de Componentes en Aplicaciones

En esta clase, exploraremos cómo crear y utilizar componentes de manera transversal dentro de una aplicación. Los componentes son elementos fundamentales que nos permiten estructurar y organizar el código de manera eficiente, delegando responsabilidades y encapsulando el diseño dentro de cada uno. A continuación, explicamos cómo crear un componente básico y cómo integrarlo en nuestra aplicación.

Estructura del Proyecto

Para comenzar, es esencial comprender cómo organizaremos nuestros componentes dentro de la estructura de carpetas del proyecto. Dentro de la carpeta core, crearemos una subcarpeta llamada Components, donde almacenaremos todos los componentes reutilizables.

Paso 1: Creación del Componente «Button»

El primer componente que vamos a crear es un botón. Este será utilizado en diferentes partes de nuestra aplicación, lo que demuestra la reutilización y la eficiencia en el desarrollo.

1. Crear el archivo del componente:
   • Navegamos a la carpeta core/components.
   • Creamos un nuevo archivo llamado Button.tsx.
2. Configurar el componente básico: Utilizamos la extensión de Visual Studio Code para generar rápidamente la plantilla del componente y comenzamos a definir su estructura.
3. Exportar el componente: El componente se exportará de manera nombrada para que pueda ser reutilizado en distintas partes de la aplicación.

export const Button = () => {
  return (
    <Touchable>
      <Text>Click me</Text>
    </Touchable>
  );
};

Paso 2: Integración de Estilos y Propiedades

Una vez creado el componente, es hora de agregar los estilos necesarios y permitir que reciba propiedades desde su componente padre.

1. Importar la paleta de colores: Los estilos y colores deben ser importados desde las constantes de la carpeta core/constants.
2. Definir los estilos: Creamos un objeto de estilos para el botón y el texto, y los aplicamos al componente. Utilizamos el siguiente código para separar los estilos y aplicarlos adecuadamente:

const styles = {
  btn: {
    backgroundColor: colors.primary,
    padding: 10,
  },
  txt: {
    color: colors.white,
    fontSize: 16,
  }
};

3. Agregar propiedades dinámicas: El componente recibirá propiedades como un título y una función onPress desde su componente padre. Para ello, se define una interfaz que especifica las propiedades del botón:

interface ButtonProps {
  title: string;
  onPress: () => void;
}

4. Aplicar las propiedades: Con las propiedades definidas, interpolamos el título y la función onPress en el componente, asegurándonos de que el botón funcione correctamente cuando se haga clic.

export const Button = ({ title, onPress }: ButtonProps) => {
  return (
    <Touchable style={styles.btn} onPress={onPress}>
      <Text style={styles.txt}>{title}</Text>
    </Touchable>
  );
};

Paso 3: Integración del Componente en la Aplicación

Ahora que tenemos el componente listo, es hora de integrarlo en nuestra aplicación principal:

1. Eliminar código innecesario: Limpiamos el archivo App.tsx para eliminar cualquier código que ya no estemos utilizando.
2. Importar el botón: Importamos el componente Button y lo utilizamos en el archivo App.tsx, pasándole las propiedades necesarias.

import { Button } from './core/components';

export default function App() {
  return (
    <Button title="Click me" onPress={() => console.log('Button pressed')} />
  );
}

3. Probar en dispositivos: Verificamos el funcionamiento del componente en dispositivos iOS y Android para asegurarnos de que se vea y funcione correctamente en ambas plataformas.

Respaldo y Versionado

Una vez que el componente funciona correctamente, es importante realizar un respaldo de nuestro trabajo utilizando Git. Esto garantiza que podamos recuperar el progreso y continuar trabajando sin problemas.

git add .
git commit -m "Se agrega el componente Button"

Conclusión

Hemos creado con éxito un componente reutilizable de tipo botón en nuestra aplicación. Este componente se puede usar en múltiples partes de la aplicación, mejorando la organización y la eficiencia del código. En la próxima clase, continuaremos creando más componentes y ampliando la funcionalidad de nuestra aplicación.

¡Nos vemos en la próxima clase!