Exportación de Componentes en React: export default vs export Nombrada

---

¿Qué es la Exportación de Componentes en React?

En React, los componentes se pueden exportar e importar en diferentes archivos para organizar mejor el código y reutilizar componentes en toda la aplicación. Existen dos formas principales de exportar componentes en React:

1. Exportación por defecto (export default)
2. Exportación nombrada (export)

¿Cómo funciona la exportación en React?

La exportación permite que un componente pueda ser usado en otro archivo. Dependiendo del tipo de exportación que uses, cambiará la forma en la que importas el componente.

Diferencia entre export default y export

¿Puede un componente tener más de un export default?

No, en un archivo de React solo puedes tener un solo export default. La exportación por defecto está pensada para exportar un único valor por archivo. Si necesitas exportar múltiples valores, debes utilizar exportaciones nombradas.

Ejemplo incorrecto:

No puedes tener más de un export default en un solo archivo, esto generaría un error de sintaxis.

// Esto genera un error
export default ComponenteUno;
export default ComponenteDos;  // Error: solo se puede tener un export default por archivo

Solución: Exportación nombrada En vez de usar múltiples export default, puedes usar exportaciones nombradas para los otros componentes, y una sola exportación por defecto.

// Esto es correcto
export const ComponenteUno = () => <h1>Componente Uno</h1>;
export const ComponenteDos = () => <h1>Componente Dos</h1>;

const ComponentePrincipal = () => <h1>Componente Principal</h1>;
export default ComponentePrincipal;

¿Por qué funciona?

• ComponentePrincipal se exporta por defecto porque es la exportación principal del archivo.
• ComponenteUno y ComponenteDos se exportan de forma nombrada, lo que te permite importar esos componentes por separado si lo deseas.

Importación en otro archivo:

import ComponentePrincipal, { ComponenteUno, ComponenteDos } from './Componentes';

Aquí puedes importar ComponentePrincipal sin llaves {} porque es la exportación por defecto, y ComponenteUno y ComponenteDos con llaves porque son exportaciones nombradas.

Ejemplos Prácticos

1. Exportación por defecto de un componente

Archivo: Saludo.js

const Saludo = () => {
  return <h1>¡Hola desde Saludo!</h1>;
};
export default Saludo;

Importación en otro archivo

import Saludo from './Saludo';

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

Aquí el componente Saludo se exporta por defecto desde Saludo.js, lo que permite importarlo sin llaves {} en otro archivo (App.js). Así, App puede usar <Saludo /> directamente. Esta es la forma más común cuando solo se exporta un componente por archivo. 🚀

2. Exportación nombrada de un componente

Archivo: Saludo.js

export const Saludo = () => {
  return <h1>¡Hola desde Saludo!</h1>;
};

Importación en otro archivo

import { Saludo } from './Saludo';

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

En este caso, Saludo se exporta de manera nombrada usando export const. Para importarlo, se debe usar llaves {} en App.js. Esto permite exportar múltiples elementos desde el mismo archivo y seleccionarlos al importarlos.

3. Exportación nombrada de múltiples componentes

Archivo: Componentes.js

export const Saludo = () => <h1>¡Hola!</h1>;
export const Despedida = () => <h1>¡Adiós!</h1>;

Importación en otro archivo

import { Saludo, Despedida } from './Componentes';

function App() {
  return (
        <>
          <Saludo />
          <Despedida />
        </>
  );
}
export default App;

Aquí se exportan dos componentes (Saludo y Despedida) de forma nombrada desde el mismo archivo. Al importarlos en App.js, se deben usar llaves {} para especificar cuáles componentes queremos utilizar. Esto facilita la reutilización y organización del código.

4. Combinando exportación por defecto y exportación nombrada

Archivo: Componentes.js

export const Saludo = () => <h1>¡Hola!</h1>;
export const Despedida = () => <h1>¡Adiós!</h1>;

const Mensaje = () => <p>Este es un mensaje</p>;
export default Mensaje;

Importación en otro archivo

import Mensaje, { Saludo, Despedida } from './Componentes';

function App() {
  return (
      <>
        <Saludo />
        <Despedida />
        <Mensaje />
      </>
  );
}
export default App;

Se combinan exportaciones nombradas (Saludo y Despedida) con una exportación por defecto (Mensaje). Al importarlos, Mensaje se trae sin llaves {} porque es la exportación por defecto, mientras que Saludo y Despedida requieren llaves {}. Esto permite mayor flexibilidad en la organización del código

5. Renombrando una exportación nombrada

Archivo: Componentes.js

export const Saludo = () => <h1>¡Hola!</h1>;

Importación con alias

import { Saludo as SaludoPrincipal } from './Componentes';

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

Se usa as para renombrar la exportación nombrada Saludo como SaludoPrincipal al importarla. Esto es útil para evitar conflictos de nombres o hacer el código más descriptivo en diferentes contextos.

6. Exportar todo un módulo con *

Archivo: Componentes.js

export const Saludo = () => <h1>¡Hola!</h1>;
export const Despedida = () => <h1>¡Adiós!</h1>;

Importación en otro archivo

import * as Componentes from './Componentes';

function App() {
  return (
      <>
          <Componentes.Saludo />
          <Componentes.Despedida />
      </>
  );
}
export default App;

Se usa import * as Componentes para importar todo el módulo como un objeto. Cada componente se accede con Componentes.Saludo y Componentes.Despedida. Esto ayuda a organizar mejor las importaciones y evita conflictos de nombres.