A magia dos componentes reside na sua reutilização: você pode criar componentes que são compostos por outros componentes. Mas à medida que você aninha mais e mais componentes, muitas vezes faz sentido começar a dividi-los em arquivos diferentes. É por isso que importamos e exportamos componentes em [[React]].
Você pode mover um componente em três etapas:
1. **Crie** um novo arquivo JS para colocar os componentes.
2. **Exporte** seu componente de função desse arquivo (usando exportações [padrão](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) ou [nomeadas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)).
3. **Importe-o** no arquivo onde você usará o componente (usando a técnica correspondente para importar exportações [padrão](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) ou [nomeadas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)).
Aqui, tanto `Profile` quanto `Gallery` foram movidos de `App.js` para um novo arquivo chamado `Gallery.js`. Agora você pode alterar `App.js` para importar `Gallery` de `Gallery.js`:
Em App.js
```jsx
import Gallery from './Gallery.js';
export default function App() {
return (
<Gallery />
);
}
```
Em Gallery.js
```jsx
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>
);
}
```
Observe como este exemplo está dividido em dois arquivos de componente 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 **exportação padrão.**
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.**
# 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.**
![[i_import-export.svg|Default and named exports]]
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](https://react.dev/learn/importing-and-exporting-components)