Importando e Exportando Componentes

A magia dos componentes está em sua reutilização: você pode criar componentes que são compostos por outros componentes. Mas conforme você aninha mais e mais componentes, muitas vezes faz sentido começar a separá-los em arquivos diferentes. Isso permite manter seus arquivos fáceis de examinar e reutilizar componentes em mais lugares.

O arquivo do componente raiz

EmSeu Primeiro Componente, você criou um componenteProfilee um componenteGalleryque o renderiza:

Atualmente, eles residem em umarquivo de componente raiz,chamadoApp.jsneste exemplo. Dependendo da sua configuração, seu componente raiz pode estar em outro arquivo. Se você usar um framework com roteamento baseado em arquivos, como o Next.js, seu componente raiz será diferente para cada página.

Exportando e importando um componente

E se você quiser mudar a tela inicial no futuro e colocar uma lista de livros de ciência lá? Ou colocar todos os perfis em outro lugar? Faz sentido moverGallery e Profilepara fora do arquivo do componente raiz. Isso os tornará mais modulares e reutilizáveis em outros arquivos. Você pode mover um componente em três etapas:

1. Crieum novo arquivo JS para colocar os componentes.
2. Exporteseu componente de função desse arquivo (usando exportaçõespadrãoounomeadas).
3. Importeno arquivo onde você usará o componente (usando a técnica correspondente para importar exportaçõespadrãoounomeadas).

Aqui, tantoProfilequantoGalleryforam movidos deApp.jspara um novo arquivo chamadoGallery.js. Agora você pode alterarApp.jspara importarGallerydeGallery.js:

Observe como este exemplo agora está dividido em dois arquivos de componentes:

1. Gallery.js:
   • Define o componenteProfile, que é usado apenas dentro do mesmo arquivo e não é exportado.
   • Exporta o componenteGallerycomo umaexportação padrão.
2. App.js:
   • ImportaGallerycomo umaimportação padrãodeGallery.js.
   • Exporta o componente raizAppcomo umaexportação padrão.

Exportando e importando vários componentes do mesmo arquivo

E se você quiser mostrar apenas umProfileem vez de uma galeria? Você também pode exportar o componenteProfile. Mas Gallery.jsjá tem uma exportaçãopadrão, e você não pode terduasexportações padrão. Você poderia criar um novo arquivo com uma exportação padrão, ou poderia adicionar uma exportaçãonomeadaparaProfile.Um arquivo só pode ter uma exportação padrão, mas pode ter inúmeras exportações nomeadas!

Primeiro,exporteProfiledeGallery.jsusando uma exportação nomeada (sem a palavra-chavedefault):

Em seguida,importeProfiledeGallery.jsparaApp.jsusando uma importação nomeada (com chaves):

Finalmente,renderize<Profile />a partir do componenteApp:

AgoraGallery.jscontém duas exportações: uma exportação padrãoGallerye uma exportação nomeadaProfile. App.jsimporta ambas. Tente editar<Profile />para<Gallery />e vice-versa neste exemplo:

Agora você está usando uma mistura de exportações padrão e nomeadas:

• Gallery.js:
  • Exporta o componenteProfilecomo umaexportação nomeada chamadaProfile.
  • Exporta o componenteGallerycomo umaexportação padrão.
• App.js:
  • ImportaProfilecomo umaimportação nomeada chamadaProfiledeGallery.js.
  • ImportaGallerycomo umaimportação padrãodeGallery.js.
  • Exporta o componente raizAppcomo umaexportação padrão.

Recapitulação

Nesta página você aprendeu:

• O que é um arquivo de componente raiz
• Como importar e exportar um componente
• Quando e como usar importações e exportações padrão e nomeadas
• Como exportar vários componentes do mesmo arquivo