5-2-Exportando un componente

Cómo Exportar Componentes en React

Guía práctica - Abril 13, 2025

Introducción

https://codesandbox.io/p/sandbox/rtf44k

En este tutorial aprenderemos a crear y exportar componentes en React, cubriendo:

• Estructura básica de un componente

• Reglas de nombrado

• Tipos de exportación

• Buenas prácticas

---

1. Creación de un Componente

Estructura de archivos

markdown

Copy

Download

src/  
├── components/  
│   └── HolaMundo.js  
└── App.jsx

Reglas esenciales:

1. Ubicación:

   • Todos los componentes van en src/

   • Recomendado: Subcarpeta components/ para mejor organización

2. Nombrado:

   • Obligatorio: Primera letra en mayúscula (PascalCase)

   • ❌ Incorrecto: holaMundo.js

   • ✅ Correcto: HolaMundo.js

---

2. Anatomía de un Componente

Estructura básica:

jsx

Copy

Download

// 1. Importaciones (opcional en React 17+)
import React from 'react';

// 2. Función del componente
function HolaMundo() {
  // 3. Return con JSX
  return (
    <div>
      <h1>Hola Mundo</h1>
      <h2>Bienvenido a React</h2>
    </div>
  );
}

// 4. Exportación
export default HolaMundo;

Puntos clave:

• Función: Debe coincidir con el nombre del archivo (por convención)

• JSX: Siempre retorna un único elemento padre (usa <div> o Fragment <>)

---

3. Exportación de Componentes

Dos métodos principales:

A. Exportación por defecto (Recomendada para componentes principales)

jsx

Copy

Download

// En HolaMundo.js
export default HolaMundo;

// Al importar:
import HolaMundo from './components/HolaMundo';

B. Exportación nombrada (Para múltiples componentes en un archivo)

jsx

Copy

Download

// En componentes.js
export function AdiosMundo() { /*...*/ }

// Al importar:
import { AdiosMundo } from './components';

---

4. Uso de Componentes

Ejemplo en App.jsx:

jsx

Copy

Download

import HolaMundo from './components/HolaMundo';
import { AdiosMundo } from './components';

function App() {
  return (
    <>
      <HolaMundo />
      <AdiosMundo />
    </>
  );
}

---

5. Errores Comunes y Soluciones

Problema: Múltiples elementos en el return

Solución: Usa Fragmentos (<>/</>)

jsx

Copy

Download

function Ejemplo() {
  return (
    <>
      <h1>Título</h1>
      <p>Contenido</p>
    </>
  );
}

Problema: Confusión en exportaciones

Recuerda:

• Solo 1 export default por archivo

• Puedes tener múltiples exportaciones nombradas

---

6. Demo Práctica

---

Conclusión

• Los componentes son bloques reutilizables que siguen reglas claras de estructura

• Usa export default para componentes principales y exportaciones nombradas para utilitarios

• Organiza tu código en la carpeta components/

¿Quieres profundizar? En próximos posts cubriremos props y estado. ¡Déjanos tus preguntas en los comentarios!

Componentes en React

Un componente en React es una pieza de código reutilizable que define cómo debe aparecer una parte de la interfaz de usuario. Piensa en ellos como bloques de construcción que puedes combinar para crear aplicaciones complejas.

¿Qué es un componente?

Un componente puede ser:

• Una función (Function Component)

• Una clase (Class Component)

Características principales:

• Reutilizable: Puedes usarlo múltiples veces

• Aislado: Maneja su propio estado y lógica

• Composable: Puedes anidar componentes dentro de otros

Tipos de Componentes

1. Componente Funcional (Recomendado)

jsx

// Componente como función declarada
function MiComponente() {
  return <h1>¡Hola Mundo!</h1>;
}

// O como arrow function
const MiComponente = () => {
  return <h1>¡Hola Mundo!</h1>;
};

2. Componente de Clase

jsx

class MiComponente extends React.Component {
  render() {
    return <h1>¡Hola Mundo!</h1>;
  }
}

Formas de Exportar Componentes

1. Exportación por defecto (Default Export)

jsx

// En el archivo MiComponente.jsx
function MiComponente() {
  return <h1>¡Hola desde MiComponente!</h1>;
}

export default MiComponente;

// Para importarlo en otro archivo:
import MiComponente from './MiComponente';

2. Exportación nombrada (Named Export)

jsx

// En el archivo componentes.jsx
export function Boton() {
  return <button>Click me</button>;
}

export function Input() {
  return <input type="text" placeholder="Escribe algo..." />;
}

// Para importarlos en otro archivo:
import { Boton, Input } from './componentes';
// O importar todo
import * as Componentes from './componentes';

3. Exportación mixta

jsx

// En el archivo MiComponente.jsx
export function BotonSecundario() {
  return <button style={{background: 'gray'}}>Secundario</button>;
}

function MiComponente() {
  return (
    <div>
      <h1>Mi Componente Principal</h1>
      <BotonSecundario />
    </div>
  );
}

export default MiComponente;

// Para importar:
import MiComponente, { BotonSecundario } from './MiComponente';

Ejemplo Completo

Archivo: TarjetaUsuario.jsx

jsx

import React from 'react';

// Componente funcional
function TarjetaUsuario({ nombre, email, avatar }) {
  return (
    <div style={{
      border: '1px solid #ccc',
      borderRadius: '8px',
      padding: '16px',
      margin: '10px',
      textAlign: 'center'
    }}>
      <img 
        src={avatar} 
        alt={nombre}
        style={{
          width: '80px',
          height: '80px',
          borderRadius: '50%'
        }}
      />
      <h3>{nombre}</h3>
      <p>{email}</p>
    </div>
  );
}

// Componente auxiliar (solo para uso interno)
function BadgeVerificado() {
  return <span style={{color: 'green'}}>✓ Verificado</span>;
}

// Exportación por defecto del componente principal
export default TarjetaUsuario;

// Exportación nombrada del componente auxiliar
export { BadgeVerificado };

Archivo: App.jsx (usando el componente)

jsx

import React from 'react';
import TarjetaUsuario, { BadgeVerificado } from './TarjetaUsuario';

function App() {
  return (
    <div>
      <h1>Lista de Usuarios</h1>
      
      <TarjetaUsuario 
        nombre="Ana García"
        email="ana@example.com"
        avatar="https://via.placeholder.com/80"
      />
      
      <TarjetaUsuario 
        nombre="Carlos López"
        email="carlos@example.com"
        avatar="https://via.placeholder.com/80"
      />
    </div>
  );
}

export default App;

Buenas Prácticas

1. Nomenclatura: Usa PascalCase para nombres de componentes

2. Un archivo por componente: Mantén cada componente en su propio archivo

3. Exportación por defecto: Úsala para el componente principal del archivo

4. Exportación nombrada: Para componentes auxiliares o utilitarios

Resumen

• Componente: Bloque de UI reutilizable

• Export default: Para el componente principal

• Export nombrado: Para múltiples componentes o utilitarios

• Importar: import Componente from './ruta' (default) o import { Componente } from './ruta' (nombrado)

¡Los componentes hacen que React sea poderoso y mantenible!