18. Creación del primer componentes básico

 

Tutorial: Creación del Primer Componente Básico en React Native

En este tutorial aprenderás a crear tu primer componente personalizado en React Native, entender su estructura básica y cómo utilizarlo en tu aplicación.

🎯 Objetivo del Tutorial

Crear un componente básico en React Native, entender su estructura y aprender a reutilizarlo.

📁 Paso 1: Entender la Estructura Actual de la App

Archivo principal: App.tsx

tsx

import React from 'react';

import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';


function App(): JSX.Element {

  const isDarkMode = useColorScheme() === 'dark';


  return (

    <SafeAreaView>

      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      {/* Contenido de la app */}

    </SafeAreaView>

  );

}


export default App;

Componentes clave:

  • SafeAreaView: Garantiza que el contenido no se superponga con áreas no seguras (notch, status bar)

  • StatusBar: Controla la barra de estado (hora, batería, señal)

  • useColorScheme(): Hook que detecta el tema del sistema (oscuro/claro)

🛠️ Paso 2: Crear la Estructura de Carpetas

Organización recomendada:

bash

# Navegar a la raíz del proyecto

cd MiPrimeraApp


# Crear estructura de carpetas

mkdir -p src/components


# Opcional: crear carpeta específica para el componente

mkdir -p src/components/MiPrimerComponente

Estructura final:

text

MiPrimeraApp/

├── src/

│   └── components/

│       └── MiPrimerComponente/

│           └── MiPrimerComponente.tsx

├── App.tsx

└── index.js

💻 Paso 3: Crear el Primer Componente

Crear archivo del componente:

bash

# Crear archivo del componente

touch src/components/MiPrimerComponente/MiPrimerComponente.tsx

Contenido del componente:

tsx

// src/components/MiPrimerComponente/MiPrimerComponente.tsx

import React from 'react';

import {View} from 'react-native';


function MiPrimerComponente(): JSX.Element {

  return (

    <View />

  );

}


export default MiPrimerComponente;

Explicación del código:

  1. import React from 'react'; - Importa React para usar JSX

  2. import {View} from 'react-native'; - Importa el componente View

  3. function MiPrimerComponente(): JSX.Element - Declara el componente

  4. return (<View />); - Retorna el componente View

  5. export default MiPrimerComponente; - Exporta el componente

🔧 Paso 4: Reglas y Buenas Prácticas

1. Nomenclatura de componentes:

tsx

// ✅ CORRECTO - Primera letra mayúscula

function MiComponente() {}


// ❌ INCORRECTO - Primera letra minúscula

function micomponente() {} // No se reconocerá como componente

2. Tipado TypeScript:

tsx

// Especificar que retorna JSX.Element

function MiComponente(): JSX.Element {

  return <View />;

}


// O usando React.FC (Function Component)

const MiComponente: React.FC = () => {

  return <View />;

};

3. Exportación:

tsx

// Exportación por defecto (recomendado para componentes)

export default MiComponente;


// Exportación nombrada (para múltiples exports)

export { MiComponente };

📱 Paso 5: Usar el Componente en App.tsx

Modificar App.tsx:

tsx

// App.tsx

import React from 'react';

import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';

import MiPrimerComponente from './src/components/MiPrimerComponente/MiPrimerComponente';


function App(): JSX.Element {

  const isDarkMode = useColorScheme() === 'dark';


  return (

    <SafeAreaView>

      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      <MiPrimerComponente />

    </SafeAreaView>

  );

}


export default App;

Explicación del import:

tsx

// Ruta relativa desde App.tsx

import MiPrimerComponente from './src/components/MiPrimerComponente/MiPrimerComponente';


// Si el componente está en la misma carpeta

import MiPrimerComponente from './MiPrimerComponente';

🎨 Paso 6: Agregar Estilos al Componente

Agregar estilos inline:

tsx

// MiPrimerComponente.tsx con estilos básicos

import React from 'react';

import {View} from 'react-native';


function MiPrimerComponente(): JSX.Element {

  return (

    <View

      style={{

        width: 50,

        height: 50,

        backgroundColor: 'red',

      }}

    />

  );

}


export default MiPrimerComponente;

Mejor práctica: Usar StyleSheet:

tsx

import React from 'react';

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


function MiPrimerComponente(): JSX.Element {

  return <View style={styles.container} />;

}


const styles = StyleSheet.create({

  container: {

    width: 50,

    height: 50,

    backgroundColor: 'red',

  },

});


export default MiPrimerComponente;

🔄 Paso 7: Reutilizar el Componente

Usar múltiples instancias:

tsx

// App.tsx con múltiples componentes

import React from 'react';

import {SafeAreaView, StatusBar, useColorScheme, View} from 'react-native';

import MiPrimerComponente from './src/components/MiPrimerComponente/MiPrimerComponente';


function App(): JSX.Element {

  const isDarkMode = useColorScheme() === 'dark';


  return (

    <SafeAreaView style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      

      <MiPrimerComponente />

      <MiPrimerComponente />

      <MiPrimerComponente />

      <MiPrimerComponente />

      <MiPrimerComponente />

    </SafeAreaView>

  );

}


export default App;

Agregar margen entre componentes:

tsx

// Mejorar MiPrimerComponente.tsx

const styles = StyleSheet.create({

  container: {

    width: 50,

    height: 50,

    backgroundColor: 'red',

    margin: 10, // Agrega espacio entre componentes

  },

});

🎯 Paso 8: Componente Mejorado con Props

Crear componente con propiedades:

tsx

// src/components/MiPrimerComponente/MiPrimerComponente.tsx

import React from 'react';

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


// Definir interfaz para las props

interface MiPrimerComponenteProps {

  color?: string;

  tamaño?: number;

}


function MiPrimerComponente({

  color = 'red',

  tamaño = 50,

}: MiPrimerComponenteProps): JSX.Element {

  return (

    <View

      style={[

        styles.container,

        {

          backgroundColor: color,

          width: tamaño,

          height: tamaño,

        },

      ]}

    />

  );

}


const styles = StyleSheet.create({

  container: {

    margin: 10,

    borderRadius: 8, // Esquinas redondeadas

  },

});


export default MiPrimerComponente;

Usar con diferentes props:

tsx

// App.tsx

<SafeAreaView style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

  <MiPrimerComponente color="red" tamaño={50} />

  <MiPrimerComponente color="blue" tamaño={60} />

  <MiPrimerComponente color="green" tamaño={70} />

  <MiPrimerComponente color="orange" tamaño={80} />

  <MiPrimerComponente color="purple" tamaño={90} />

</SafeAreaView>

🐛 Paso 9: Solución de Problemas Comunes

Error: "MiPrimerComponente is not defined"

tsx

// Verificar:

// 1. Import correcto

import MiPrimerComponente from './src/components/MiPrimerComponente/MiPrimerComponente';


// 2. Export en el componente

export default MiPrimerComponente;


// 3. Nombre del archivo coincide

// Archivo: MiPrimerComponente.tsx

// Export: MiPrimerComponente

Error: "JSX element has no corresponding closing tag"

tsx

// ❌ INCORRECTO

<MiPrimerComponente>


// ✅ CORRECTO (self-closing)

<MiPrimerComponente />


// ✅ CORRECTO (con hijos)

<MiPrimerComponente>

  <Text>Hijo</Text>

</MiPrimerComponente>

Error: "Cannot find module"

bash

# Verificar rutas

# Ruta relativa correcta desde App.tsx:

./src/components/MiPrimerComponente/MiPrimerComponente


# Verificar que el archivo existe

ls src/components/MiPrimerComponente/

📝 Paso 10: Buenas Prácticas Avanzadas

1. Crear archivo de barril (barrel file):

tsx

// src/components/index.ts

export {default as MiPrimerComponente} from './MiPrimerComponente/MiPrimerComponente';


// Luego importar desde App.tsx

import {MiPrimerComponente} from './src/components';

2. Separar estilos en archivo aparte:

tsx

// MiPrimerComponente.styles.ts

import {StyleSheet} from 'react-native';


export default StyleSheet.create({

  container: {

    margin: 10,

    borderRadius: 8,

  },

});


// MiPrimerComponente.tsx

import React from 'react';

import {View} from 'react-native';

import styles from './MiPrimerComponente.styles';

3. Agregar documentación JSDoc:

tsx

/**

 * Mi primer componente personalizado

 * @component

 * @param {Object} props - Propiedades del componente

 * @param {string} [props.color='red'] - Color de fondo

 * @param {number} [props.tamaño=50] - Tamaño en píxeles

 * @returns {JSX.Element} Componente renderizado

 */

function MiPrimerComponente({color = 'red', tamaño = 50}) {

  return <View style={{backgroundColor: color, width: tamaño, height: tamaño}} />;

}

🧪 Paso 11: Ejercicio Práctico

Crear componente "Tarjeta de Presentación":

tsx

// src/components/TarjetaPresentacion/TarjetaPresentacion.tsx

import React from 'react';

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


interface TarjetaPresentacionProps {

  nombre: string;

  ocupacion: string;

  email: string;

}


function TarjetaPresentacion({

  nombre,

  ocupacion,

  email,

}: TarjetaPresentacionProps): JSX.Element {

  return (

    <View style={styles.tarjeta}>

      <Text style={styles.nombre}>{nombre}</Text>

      <Text style={styles.ocupacion}>{ocupacion}</Text>

      <Text style={styles.email}>{email}</Text>

    </View>

  );

}


const styles = StyleSheet.create({

  tarjeta: {

    backgroundColor: 'white',

    padding: 20,

    borderRadius: 10,

    margin: 10,

    shadowColor: '#000',

    shadowOffset: {width: 0, height: 2},

    shadowOpacity: 0.1,

    shadowRadius: 4,

    elevation: 3,

  },

  nombre: {

    fontSize: 20,

    fontWeight: 'bold',

    marginBottom: 5,

  },

  ocupacion: {

    fontSize: 16,

    color: '#666',

    marginBottom: 10,

  },

  email: {

    fontSize: 14,

    color: '#007AFF',

  },

});


export default TarjetaPresentacion;

Usar en App.tsx:

tsx

import TarjetaPresentacion from './src/components/TarjetaPresentacion/TarjetaPresentacion';


// En el return

<TarjetaPresentacion

  nombre="Juan Pérez"

  ocupacion="Desarrollador React Native"

  email="juan@email.com"

/>

✅ Checklist de Componente Correcto

  • Nombre del componente empieza con mayúscula

  • Importa React

  • Importa componentes necesarios de react-native

  • Exporta por defecto el componente

  • Retorna JSX.Element

  • Estilos definidos con StyleSheet (no inline)

  • Props definidas con interfaz TypeScript (opcional)

  • Ruta de importación correcta en App.tsx

🎉 ¡Felicidades!

Has creado tu primer componente React Native. Has aprendido:

✅ Estructura básica de un componente
✅ Import/export correcto
✅ Agregar estilos con StyleSheet
✅ Pasar props al componente
✅ Reutilizar componentes múltiples veces

📚 Próximos Pasos

  1. Explorar más componentes: Text, Image, Button, TextInput

  2. Aprender hooks: useState, useEffect, useContext

  3. Implementar navegación: React Navigation

  4. Consumir APIs: Fetch, Axios

  5. Manejar estado global: Redux, Context API

¡Excelente trabajo! Ahora tienes las bases para crear componentes personalizados. Sigue practicando creando componentes más complejos. 

Comentarios

Publicar un comentario

Entradas más populares de este blog

17. Estructura de una aplicación de React Native, una vista mas profunda

  Tutorial: Estructura de una Aplicación React Native - Una Vista Más Profunda En este tutorial exploraremos en detalle la estructura de un proyecto React Native, analizando cada archivo y carpeta para entender completamente cómo funciona. 🎯 Objetivo del Tutorial Comprender la estructura interna de un proyecto React Native, el propósito de cada archivo y cómo interactúan entre sí. 📁 Estructura Completa del Proyecto text MiPrimeraApp/ │ ├── __tests__/                    # Pruebas unitarias ├── .bundle/                     # Configuración del bundle ├── .vscode/                     # Configuración de VS Code ├── android/                     # Proyecto nativo Android ├── ios/                         # Proyecto nativo iOS ├── no...
Leer más

Guía Paso a Paso para Entender React Native (antes del Tutorial)

  1. 📱 ¿Qué es React Native? React Native es un  framework para crear aplicaciones móviles nativas  usando  JavaScript y React . A diferencia de las apps web, genera componentes nativos reales (no WebViews). Comparación con React Web: React Web React Native <div> <View> <span> ,  <p> <Text> <input> <TextInput> onClick onPress CSS StyleSheet (JavaScript) 2. 🎯 Prerrequisitos Básicos A) Conocimientos previos necesarios: ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator) ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!) Componentes Props (propiedades) ✅ Hooks (useState, useEffect) B) Si NO sabes React, necesitas esto primero: javascript // 1. Componente funcional function MiComponente ( ) { return < View > Hola Mundo < / View > ; } // 2. Props (propiedades que recibe un componente) function Saludo ( props ) { return < Text > Hola { props . nombre } ...
Leer más

12. Configuracion del entorno de desarrollo en Windows

  Tutorial: Configuración del Entorno de Desarrollo en Windows para React Native En este tutorial guiaremos paso a paso la configuración completa del entorno de desarrollo para React Native en Windows, enfocándonos específicamente en desarrollo para Android. 🎯 Objetivo del Tutorial Configurar Windows para desarrollar aplicaciones React Native con Android Studio, incluyendo todas las herramientas necesarias. ⚠️ Limitaciones en Windows Solo desarrollo Android: Windows no soporta desarrollo iOS (requiere macOS) Emuladores Android: Podrás usar emuladores de Android Studio Dispositivos físicos: Puedes conectar dispositivos Android reales 📋 Lista de Herramientas a Instalar Node.js (con gestor de versiones NVM) Android Studio (con SDK de Android) Java Development Kit (JDK) Visual Studio Code (editor de código) Extensiones de VS Code (para React Native) 🛠️ Paso 1: Instalar Node.js con NVM para Windows ¿Por qué NVM? Permite cambiar entre versiones de Node.js fácilmente Evita conflictos e...
Leer más