🎯 Importar e Exportar Componentes no React
Em poucas palavras
Definição técnica ou simplificada do conceito.
📝 Notas e Desenvolvimento
🔗 Conexões e Contexto
- Atlas: MdC - Programação
- Notas Relacionadas:
📚 Referências e Fontes
Links Externos
Citações Diretas
📂 Outros Conteúdos Preservados
Exportações Padrão Vs Nomeadas
Existem duas maneiras principais de exportar valores com JavaScript: exportações padrão e exportações nomeadas. Até agora, nossos exemplos usaram apenas exportações padrão. Mas você pode usar uma ou ambas no mesmo arquivo. Um arquivo pode ter no máximo uma exportação padrão, mas pode ter quantas exportações nomeadas desejar.
Como você exporta seu componente dita como você deve importá-lo. Você receberá um erro se tentar importar uma exportação padrão da mesma forma que faria com uma exportação nomeada! Esta tabela pode ajudá-lo a acompanhar:
| Sintaxe | Declaração de exportação | Declaração de importação |
|---|---|---|
| Padrão | export default function Button() {} | import Button from './Button.js'; |
| Nomeada | export function Button() {} | import { Button } from './Button.js'; |
Ao escrever uma importação padrão, você pode colocar qualquer nome que desejar após import. Por exemplo, você poderia escrever import Banana from './Button.js' e ainda assim obteria a mesma exportação padrão. Em contraste, com importações nomeadas, o nome deve corresponder em ambos os lados. É por isso que são chamadas de importações nomeadas!
As pessoas geralmente usam exportações padrão se o arquivo exporta apenas um componente, e usam exportações nomeadas se ele exporta vários componentes e valores. Independentemente do estilo de codificação que você prefere, sempre dê nomes significativos às suas funções de componente e aos arquivos que as contêm. Componentes sem nomes, como export default () => {}, são desencorajados porque dificultam a depuração.
Exportando e Importando Múltiplos Componentes do Mesmo Arquivo
E se você quiser mostrar apenas um Profile em vez de uma galeria? Você também pode exportar o componente Profile. Mas Gallery.js já tem uma exportação padrão, e você não pode ter duas exportações padrão. Você poderia criar um novo arquivo com uma exportação padrão, ou poderia adicionar uma exportação nomeada para Profile. Um arquivo pode ter apenas uma exportação padrão, mas pode ter inúmeras exportações nomeadas!
:: Referência :: Importing and Exporting Components – React