4.1-18. Creación del primer componentes básico

 

Tu Primer Componente en React Native

¡Bienvenidos a este nuevo post sobre React Native! Hoy vamos a aprender qué es un componente, cómo se estructura y cómo podemos crear nuestro primer componente básico.

¿Qué es un componente?

En React Native, un componente es una pieza reutilizable de código que define una parte de la interfaz de usuario. Puede ser tan simple como un botón o tan complejo como una pantalla completa.

El punto de entrada de una aplicación en React Native es el archivo index.jsx, que utiliza un componente principal llamado App. Este componente retorna elementos JSX, que son una mezcla de JavaScript y XML para definir la estructura visual.

Ejemplo de un componente básico

jsx

import React from 'react';
import { View } from 'react-native';

function MiPrimerComponente() {
  return <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />;
}

export default MiPrimerComponente;

Estructura de un componente

1. Importaciones: Necesitamos importar React y los componentes de React Native que usaremos (como View).

2. Función del componente: Debe comenzar con mayúscula (por convención).

3. Retorno de JSX: Define lo que se renderizará en pantalla.

4. Exportación: Para poder usarlo en otros archivos.

Usando el componente en App.js

jsx

import React from 'react';
import { View } from 'react-native';
import MiPrimerComponente from './src/components/MiPrimerComponente';

function App() {
  return (
    <View>
      <MiPrimerComponente />
      <MiPrimerComponente />
      <MiPrimerComponente />
    </View>
  );
}

export default App;

Si guardamos los cambios, veremos tres cuadros rojos en la pantalla, demostrando cómo un componente puede reutilizarse fácilmente.

Estilos básicos

El prop style permite personalizar la apariencia del componente. Por ejemplo:

jsx

<View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />

En futuros posts, profundizaremos en cómo organizar mejor los estilos y buenas prácticas.

Conclusión

Hemos creado nuestro primer componente en React Native, entendiendo su estructura básica y cómo reutilizarlo. ¡Espero que este post te haya sido útil!

¿Qué te gustaría aprender en el próximo post? Déjalo en los comentarios.

🚀 ¡Sigue codificando! 🚀