|
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