|
1 | 1 | --- |
2 | | -title: Importando e Exportando componentes |
| 2 | +title: Importando e Exportando Componentes |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <Intro> |
6 | 6 |
|
7 | | -A magia dos componentes reside na sua 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. |
| 7 | +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. |
8 | 8 |
|
9 | 9 | </Intro> |
10 | 10 |
|
11 | 11 | <YouWillLearn> |
12 | 12 |
|
13 | 13 | * O que é um arquivo de componente raiz |
14 | 14 | * Como importar e exportar um componente |
15 | | -* Quando usar importações e exportações padrão e nomeada |
16 | | -* Como importar e exportar múltiplos componentes em um arquivo |
| 15 | +* Quando usar importações e exportações padrão (`default`) e nomeada |
| 16 | +* Como importar e exportar múltiplos componentes em um arquivo |
17 | 17 | * Como separar componentes em múltiplos arquivos |
18 | 18 |
|
19 | 19 | </YouWillLearn> |
20 | 20 |
|
21 | 21 | ## O arquivo de componente raiz {/*the-root-component-file*/} |
22 | 22 |
|
23 | | -Em [Seu primeiro componente](/learn/your-first-component), você criou um componente `Profile` e um componente `Gallery` que renderiza: |
| 23 | +Em [Seu Primeiro Componente](/learn/your-first-component), você criou um componente `Profile` e um componente `Gallery` que renderiza: |
24 | 24 |
|
25 | 25 | <Sandpack> |
26 | 26 |
|
@@ -108,10 +108,10 @@ Observe como este exemplo é dividido em dois arquivos de componentes agora: |
108 | 108 |
|
109 | 109 | 1. `Gallery.js`: |
110 | 110 | - Define o componente `Profile` que é usado apenas dentro do mesmo arquivo e não é exportado. |
111 | | - - Exporta o componente `Gallery` como uma **exportação padrão.** |
| 111 | + - Exporta o componente `Gallery` como uma **(default export).** |
112 | 112 | 2. `App.js`: |
113 | 113 | - Importa `Gallery` como uma **importação padrão** de `Gallery.js`. |
114 | | - - Exporta o componente raiz `App` como uma **exportação padrão.** |
| 114 | + - Exporta o componente raiz `App` como uma **exportação padrão (default export).** |
115 | 115 |
|
116 | 116 |
|
117 | 117 | <Note> |
@@ -143,14 +143,13 @@ A forma como você exporta seu componente determina como você deve importá-lo. |
143 | 143 |
|
144 | 144 | 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_! |
145 | 145 |
|
146 | | -**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.** |
147 | | -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. |
| 146 | +**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. |
148 | 147 |
|
149 | 148 | </DeepDive> |
150 | 149 |
|
151 | 150 | ## Exportando e importando múltiplos componentes no mesmo arquivo {/*exporting-and-importing-multiple-components-from-the-same-file*/} |
152 | 151 |
|
153 | | -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ê pode 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!** |
| 152 | +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!** |
154 | 153 |
|
155 | 154 | <Note> |
156 | 155 |
|
@@ -239,8 +238,8 @@ Nessa pagina você aprendeu: |
239 | 238 |
|
240 | 239 | * O que é um arquivo de componente raiz |
241 | 240 | * Como importar e exportar um componente |
242 | | -* Quando e como usar importações e exportações padrão e nomeada |
243 | | -* Como exportar múltiplos componentes em um arquivo |
| 241 | +* Quando e como usar importações e exportações padrão e nomeada |
| 242 | +* Como exportar múltiplos componentes em um arquivo |
244 | 243 |
|
245 | 244 | </Recap> |
246 | 245 |
|
|
0 commit comments