5.3-26. Diferencias entre export y export default

Diferencias entre export y export default en React

https://codesandbox.io/p/sandbox/2pkm2h

En este post vamos a analizar las principales diferencias entre usar export normal y export default al trabajar con componentes en React.

🔹 Exportación normal (export)

• Requiere llaves {} al importar:

  jsx

  import { Item } from './Item';

• Debes usar el nombre exacto de la función/componente al importar.

• Permite múltiples exportaciones en un mismo archivo:

  jsx

  export function Item() {...}
  export function SegundoItem() {...}

🔸 Exportación por defecto (export default)

• No usa llaves al importar:

  jsx

  import Item from './Item';

• Puedes renombrarlo al importar:

  jsx

  import CualquierNombre from './Item';

• Solo puede haber uno por archivo. No permite múltiples default.

📂 Ejemplo práctico

Archivo Item.jsx

jsx

export default function Item() {  // Exportación principal
  return <h1>Item</h1>;
}

export function SegundoItem() {  // Exportación secundaria
  return <h1>Segundo Item</h1>;
}

Archivo Contenedor.jsx

jsx

import ComponentePrincipal from './Item';  // Representa a Item (default)
import { SegundoItem } from './Item';      // Importación con llaves

function Contenedor() {
  return (
    <div>
      <ComponentePrincipal />  {/* Item con nombre modificado */}
      <SegundoItem />          {/* Nombre exacto */}
    </div>
  );
}

💡 ¿Cuándo usar cada uno?

• Usa export default para componentes principales.

• Usa export normal cuando necesites exportar múltiples funciones/componentes desde un mismo archivo.

⚠️ Error común: Intentar usar múltiples export default en un archivo o confundir las llaves al importar.

¿Tienes dudas? ¡Déjalas en los comentarios!