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

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

Tutorial: Aplicación React Native para Agregar Tareas - Minimalista

  Voy a crear una aplicación React Native simple que permite agregar tareas a una lista usando un formulario con un solo input. Será minimalista y bien explicado paso a paso. Estructura del Proyecto text react-native-todo-app/ ├── src/ │ ├── components/ │ │ ├── TaskForm.js │ │ └── TaskList.js │ └── App.js ├── package.json └── README.md Paso a Paso 1. Crear el proyecto React Native bash npx react-native init ReactNativeTodoApp cd ReactNativeTodoApp 2. Crear el componente App.js jsx import React , { useState } from 'react' ; import { View , Text , StyleSheet , SafeAreaView } from 'react-native' ; import TaskForm from './src/components/TaskForm' ; import TaskList from './src/components/TaskList' ; function App ( ) { // Estado para almacenar la lista de tareas const [ tasks , setTasks ] = useState ( [ ] ) ; // Función para agregar una nueva tarea const addTask = ( taskText ) => { // Crear un o...
Leer más

5. Vista Rapida: Estructura Projecto Base

  Tutorial: Reproducir la Estructura de un Proyecto Base de React Native En este tutorial aprenderás a crear y entender la estructura básica de un proyecto en React Native, utilizando la imagen adjunta como referencia y los conceptos proporcionados. 🎯 Objetivo del Tutorial Reproducir la estructura básica de un proyecto React Native y comprender la función de cada carpeta y archivo esencial. 📁 Estructura de Carpetas y Archivos (Basada en la Imagen) text tu-proyecto/ │ ├── .bundle/ ├── .yscode/ ├── android/          # Código nativo para Android ├── ios/              # Código nativo para iOS ├── node_modules/     # Dependencias externas instaladas ├── src/              # Código fuente principal de la app ├── vendor/ │ ├── .eslintrc.js      # Configuración de ESLint ├── .gitignore        # Archivos a ignorar por Git ├── .node-version   ...
Leer más