Importando e Exportando Componentes

O arquivo de componente raiz

Em Seu Primeiro Componente, você criou um componente Profile e um componente Gallery que renderiza:

Atualmente, eles residem em um arquivo de componente raiz, chamado App.js nesse exemplo. Em Criar Aplicação React, seu app reside em src/App.js. Dependendo da sua configuração, seu componente raiz pode estar em outro arquivo. Se você usar um framework com roteamento baseado em arquivo, 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ências lá? Ou colocar todos os perfis em outro lugar? Faz sentido mover Gallery e Profile para 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. Criar um novo arquivo JS para colocar os componentes.
2. Exportar seu componente de função desse arquivo (usando exportações padrão ou nomeada).
3. Importar no arquivo onde você usará o componente (usando a técnica correspondente para importar exportações padrão ou nomeadas).

Aqui, tanto Profile e Gallery foram movidos de App.js para um novo arquivo chamado Gallery.js. Agora você pode alterar o arquivo App.js para importar o componente Gallery de Gallery.js:

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

1. Gallery.js:
   • Define o componente Profile que é usado apenas dentro do mesmo arquivo e não é exportado.
   • Exporta o componente Gallery como uma (default export).
2. App.js:
   • Importa Gallery como uma importação padrão de Gallery.js.
   • Exporta o componente raiz App como uma exportação padrão (default export).

import Gallery from './Gallery';

Deep Dive

Exportação padrão vs nomeada

Show Details

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 um ou ambos no mesmo arquivo. Um arquivo não pode ter mais de uma exportação padrão, mas pode ter quantas exportações nomeadas você desejar.

A forma como você exporta seu componente determina 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! Este gráfico pode ajudá-lo a acompanhar:

Sintase	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';

Quando você escreve uma importação padrão, você pode colocar o nome que quiser depois de import. Por exemplo, você poderia escrever import Banana from './Button.js' e ainda forneceria a mesma exportação padrão. Por outro lado, com importações nomeadas, o nome deve corresponder em ambos os lados. É por isso que eles são chamados de importações nomeadas!

Os usuários costumam usar exportações padrão se o arquivo exportar apenas um componente e usar exportações nomeadas se exportar vários componentes e valores. Independentemente de qual estilo de código você preferir, sempre forneça nomes significativos para as funções do componente e os arquivos que os contêm. Componentes sem nomes, como export default () => {}, são desencorajados porque dificultam a depuração.

Exportando e importando múltiplos componentes no 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 adicionar uma exportação nomeada para Profile. Um arquivo pode ter apenas uma exportação padrão, mas pode ter várias exportações nomeadas!

Primeiro, exporte Profile de Gallery.js usando uma exportação nomeada (sem a palavra-chave default):

export function Profile() {
  // ...
}

Então, importe Profile de Gallery.js para App.js usando uma importação nomeada (com chaves):

import { Profile } from './Gallery.js';

Finalmente, renderize <Profile /> do componente App:

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

Agora Gallery.js contém duas exportações: uma exportação Gallery padrão e uma exportação Profile nomeada. App.js importa ambos. Tente editar <Profile /> para <Gallery /> e vice-versa neste exemplo:

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

• Gallery.js:
  • Exporta o componente Profile como uma exportação chamada Profile.
  • Exporta o componente Gallery como uma exportação padrão.
• App.js:
  • Importa Profile como uma importação nomeada chamada Profile de Gallery.js.
  • Importa Gallery como uma importação padrão de Gallery.js.
  • Exporta o componente raiz App como uma exportação padrão.