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:
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
:
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).
- Define o componente
App.js
:- Importa
Gallery
como uma importação padrão deGallery.js
. - Exporta o componente raiz
App
como uma exportação padrão (default export).
- Importa
Deep Dive
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:
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 chamadaProfile
. - Exporta o componente
Gallery
como uma exportação padrão.
- Exporta o componente
App.js
:- Importa
Profile
como uma importação nomeada chamadaProfile
deGallery.js
. - Importa
Gallery
como uma importação padrão deGallery.js
. - Exporta o componente raiz
App
como uma exportação padrão.
- Importa
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
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'; |
// 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.