Importando e Exportando Componentes

A magia dos componentes reside na sua habilidade de reutilização: você pode criar um componente que é composto por outros componentes. Mas conforme você aninha mais e mais componentes, faz sentido começar a dividi-los em arquivos diferentes. Isso permite que você mantenha seus arquivos fáceis de explorar e reutiliza-los em mais lugares.

Você aprenderá

O que é um arquivo de componente raiz
Como importar e exportar um componente
Quando usar importações e exportações padrão (default) e nomeada
Como importar e exportar múltiplos componentes em um arquivo
Como separar componentes em múltiplos arquivos

O arquivo de componente raiz

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

Fork

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Cientistas incríveis</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Atualmente, eles residem em um arquivo de componente raiz, chamado App.js nesse exemplo. 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:

Criar um novo arquivo JS para colocar os componentes.
Exportar seu componente de função desse arquivo (usando exportações padrão ou nomeada).
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:

Fork

import Gallery from './Gallery.js';

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

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

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).
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).

Note

Você pode encontrar arquivos que não possuem a extensão de arquivo .js da seguinte forma:

import Gallery from './Gallery';

Tanto './Gallery.js' quanto './Gallery' funcionarão com o React, embora o primeiro esteja mais próximo de como os Módulos ES nativos funcionam.

Deep Dive

Exportação padrão vs nomeada

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!

Note

Para reduzir a confusão potencial entre exportações padrão e nomeadas, algumas equipes optam por manter apenas um estilo (padrão ou nomeado) ou evitar misturá-los em um único arquivo. Faça o que for melhor para você!

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:

Fork

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

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

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.

Recap

Nessa pagina 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 nomeada
Como exportar múltiplos componentes em um arquivo

Try out some challenges

Challenge 1 of 1:
Divida os componentes ainda mais

Atualmente, Gallery.js exporta Profile e Gallery, o que é um pouco confuso.

Mova o componente Profile para seu próprio Profile.js e, em seguida, altere o componente App para renderizar <Profile /> e <Gallery /> um após o outro.

Você pode usar uma exportação padrão ou nomeada para Profile, mas certifique-se de usar a sintaxe de importação correspondente tanto em App.js e Gallery.js! Você pode consultar a tabela abaixo:

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

Fork

// Move me to Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Cientistas incríveis</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Depois de fazê-lo funcionar com um tipo de exportação, faça-o funcionar com o outro tipo.

PreviousSeu Primeiro Componente

NextEscrevendo Tags com JSX

Importando e Exportando Componentes

Você aprenderá

O arquivo de componente raiz

Exportando e importando um componente

Note

Deep Dive

Exportação padrão vs nomeada

Exportando e importando múltiplos componentes no mesmo arquivo

Note

Recap

Try out some challenges

Challenge 1 of 1: Divida os componentes ainda mais

Challenge 1 of 1:
Divida os componentes ainda mais