Guías Técnicas

Cómo crear tu primer componente en React Native paso a paso

  ¿Qué es un componente en React Native?

En React Native, un componente es una pieza reutilizable de interfaz que te permite construir apps móviles por partes reutilizables y organizadas. Los componentes son como bloques de construcción que puedes combinar para crear pantallas completas, con lógica, estilo y comportamiento propios.

Crear el proyecto

Usamos Expo para hacerlo más fácil:

bash 
npx create-expo-app@latest PrimerComponente --template blank
cd PrimerComponente
npx expo start

Esto crea una estructura básica como esta:

bash 
PrimerComponente/
├── App.js
├── babel.config.js
├── package.json
├── node_modules/
└── assets/
  ├── favicon.png
  ├── icon.png
  ├── splash.png
  └── adaptive-icon.png

Crear una carpeta para componentes

Dentro del proyecto, crea una carpeta para tus componentes:

bash 
PrimerComponente/
└── components/
  └── MiPrimerComponente.jsx

Crear el componente

Ahora, dentro de la carpeta components, crea un archivo llamado MiPrimerComponente.jsx y agrega el siguiente código:

jsx 
import React from 'react'; // importamos React
// importa los componentes necesarios
import { View, Text, StyleSheet } from 'react-native';

// Este es un componente funcional llamado MiPrimerComponente
const MiPrimerComponente = () => {
// Aquí puedes definir la lógica y el estado del componente

// El componente retorna un View que contiene un Text
return (
  // View actúa como un contenedor tipo div en React Native
  <View style={styles.contenedor}>
    <Text style={styles.texto}>¡Hola mundo! desde mi primer componente.</Text>
  </View>
);
};

// Aquí defines los estilos CSS para tu componente
const styles = StyleSheet.create({
  contenedor: {
    flex: 1, // ocupa todo el espacio disponible
    justifyContent: 'center', // centra verticalmente
    alignItems: 'center',     // centra horizontalmente
    padding: 20,
    backgroundColor: '#f8f9fa', // gris más claro
    borderRadius: 10,
    margin: 10,
  },
  texto: {
    fontSize: 18,
    color: '#333',
    textAlign: 'center',
  },
});

// Exportamos el componente para usarlo en App.js
export default MiPrimerComponente;

Usar el componente

Ahora que tienes tu componente creado, es hora de usarlo en tu aplicación. Abre el archivo App.js y reemplaza su contenido con lo siguiente:

jsx 
import React from 'react';
import { SafeAreaView } from 'react-native';
import MiPrimerComponente from './components/MiPrimerComponente';

export default function App() {
return (
  <SafeAreaView>
    <MiPrimerComponente />
  </SafeAreaView>
);
}

🎉 Ejecutar y ver el resultado

En este punto, ya tienes tu componente creado y utilizado en tu aplicación. Ahora es momento de ejecutarla y ver cómo se ve en la pantalla, para eso corre el siguiente comando en la terminal:

bash 
npx expo start

Esto abrirá una ventana en tu navegador. Escanea el código QR con la app de Expo Go en tu dispositivo móvil o usa un emulador para ver tu componente en acción.

🎉 ¡Felicidades! Has creado tu primer componente en React Native.

  📌 Explicación

  • <View>: Similar a un <div> en HTML.
  • <Text>: Se usa para mostrar texto.

  ¿Cómo está compuesto un componente básico en React Native?

Un componente básico en React Native se estructura en varias partes claves:

  1. Importaciones necesarias
    Se importa React y los módulos nativos como View, Text y StyleSheet desde react-native.

  2. Componente funcional
    Se define una función (generalmente con arrow function) que devuelve la interfaz en JSX.

  3. Estilos con StyleSheet
    Los estilos se agrupan con StyleSheet.create({}), lo que mejora el rendimiento y organiza el código.

  4. Exportación del componente
    Se usa export default para que el componente pueda ser utilizado en otros archivos, por ejemplo en App.js.

Si tienes dudas entre una exportación por defecto o nombrada, puedes leer esta guía.

💡Este patrón es la base para construir interfaces reutilizables, limpias y escalables en tus apps con React Native.