Exportação de componentes

---

No React, a exportação de componentes permite que você reutilize esses componentes em outros arquivos ou módulos do seu projeto. Existem duas maneiras comuns de exportar componentes no React: a exportação padrão (default export) e a exportação nomeada (named export).

Exportação padrão (Default Export)

Com a exportação padrão, você pode exportar apenas um componente por arquivo. Ao importar o componente em outro arquivo, você pode dar a ele o nome que preferir. Aqui está um exemplo de como você pode exportar um componente:

// Arquivo: MeuComponente.js
import React from 'react';
 
const MeuComponente = () => {
  return <p>Olá, eu sou um componente!</p>;
};
 
export default MeuComponente;

E para importar este componente em outro arquivo:

// Outro Arquivo
import MeuComponente from './MeuComponente';
 
// Agora você pode usar o componente MeuComponente normalmente

Exportação nomeada (Named Export)

Com a exportação nomeada, você pode exportar vários componentes, funções ou constantes de um único arquivo. Ao importar, você deve usar o mesmo nome que foi dado ao exportar. Aqui está um exemplo:

// Arquivo: OutroComponente.js
import React from 'react';
 
export const ComponenteA = () => {
  return <p>Sou o componente A!</p>;
};
 
export const ComponenteB = () => {
  return <p>Sou o componente B!</p>;
};

Atenção para usuários do VS Code

O VS Code pode apresentar dificuldades em realizar o auto import de funções e classes caso seja feito a exportação da seguinte forma:

export const ComponenteA = () => {
	return <p>Sou o componente A!</p>;
};

Para resolver este problema, basta utilizar a seguinte abordagem:

const ComponenteA = () => {
	return <p>Sou o componente A!</p>;
};
 
export { ComponenteA };

E para importar estes componentes em outro arquivo:

// Outro Arquivo
import { ComponenteA, ComponenteB } from './OutroComponente';
 
// Agora você pode usar ComponenteA e ComponenteB normalmente

Exportação com renomeação (Alias)

Você pode renomear os componentes ao importá-los, o que pode ser útil para evitar conflitos de nomes ou simplesmente para usar um nome mais conciso:

// Outro Arquivo
import { ComponenteA as A, ComponenteB as B } from './OutroComponente';
 
// Agora você pode usar A e B para se referir aos componentes

Referências

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)