My First Component
+Meu Primeiro Componente
-
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component +
- Componentes: O Alicerce da UI +
- Definindo um Componente +
- Usando um Componente
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Este trecho de HTML representa um artigo ``, seu título ``, e um índice de conteúdo (abreviado) apresentado como uma lista ordenada ``. Este conjunto de tags, combinado com CSS para estilização e JavaScript para a interatividade, é responsável por cada elemento de UI que você vê na Web — seja uma barra lateral, avatar, modal ou dropdown.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+O React permite que você combine tags HTML, CSS e JavaScript em "componentes" personalizados, **elementos de UI reutilizáveis para a sua aplicação.** O código do índice de conteúdo que você viu acima pode ser transformado em um componente ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Assim como nas tags HTML, você pode compor, ordenar e colocá-lo dentro de outros componentes para criar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:
```js
@@ -50,12 +50,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
+À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos através da reutilização de componentes que você já escreveu, acelerando seu desenvolvimento. Nosso índice de conteúdo acima poderia ser usado em qualquer tela usando o componente `
@@ -76,33 +75,33 @@ img { height: 200px; }
-And here's how to build a component:
+Agora vamos aprender como construir um componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Passo 1: Exportar o componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+O prefixo `export default` é uma [sintaxe padrão do JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (não específica do React). Ele permite que você marque a função principal em um arquivo para que você possa mais tarde importá-la de outros arquivos. (Mais sobre importação em [Importando e Exportando Componentes](/learn/importing-and-exporting-components)!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Passo 2: Definir a função {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Com a sintaxe `function Profile() { }` você está definindo uma função JavaScript chamada `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Os componentes do React são funções comuns do JavaScript, mas **seus nomes devem começar com letra maiúscula** ou não funcionarão!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Passo 3: Adicionar HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+O componente retorna uma tag `![]()
` com os atributos `src` e `alt`. O `![]()
` é escrito como HTML, mas na verdade, é o JavaScript que está por trás! Essa sintaxe é chamada [JSX](/learn/writing-markup-with-jsx) e permite usar tags HTML dentro do JavaScript.
-Return statements can be written all on one line, as in this component:
+As instruções de retorno podem ser escritas todas em uma linha, como neste componente:
```js
return 
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mas se seu HTML não estiver na mesma linha que a declaração `return`, você deve colocá-la entre parênteses:
```js
return (
@@ -114,13 +113,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sem parênteses, qualquer código nas linhas após `return` [será ignorado](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usando um componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Agora que você definiu seu componente `Profile`, você pode colocá-lo dentro de outros componentes. Por exemplo, você pode exportar um componente `Gallery` que usa várias vezes o componente `Profile`:
@@ -137,7 +136,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-### What the browser sees {/*what-the-browser-sees*/}
+### O que o navegador vê {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Observe a diferença entre caixa alta e caixa baixa no nome dos componentes:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` é minúscula, então o React sabe que nos referimos a uma tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E o componente `Profile` contém ainda mais HTML, como a tag `![]()
`. No final, é isso que o navegador vê:
```html
- Amazing scientists
+ Cientistas incríveis
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Agrupando e organizando componentes {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Os componentes são funções comuns do JavaScript, portanto, você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou relacionados entre si. Caso o arquivo comece a ficar muito extenso, você pode sempre mover `Profile` para um arquivo separado. Você aprenderá como fazer isso em breve na [página sobre importações.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Como os componentes `Profile` são renderizados dentro da `Gallery`—mesmo várias vezes—, podemos dizer que `Gallery` é um **componente pai**, tornando cada `Profile` como um componente "filho". Essa é parte da magia do React: você pode definir um componente uma vez e usá-lo em quantos lugares e quantas vezes quiser.
-Components can render other components, but **you must never nest their definitions:**
+Componentes podem renderizar outros componentes, mas **você nunca deve definir um componente dentro de outro componente:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Nunca defina um componente dentro de outro componente!
function Profile() {
// ...
}
@@ -190,47 +189,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+O trecho acima é [muito lento e causa erros.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Em vez disso, defina todos os componentes no nível superior:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Declare componentes no nível superior
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando um componente filho precisa de alguns dados de um pai, [passe-os por props](/learn/passing-props-to-a-component) em vez de definições de aninhamento.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componentes em todos os níveis {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Sua aplicação React começa em um componente "raiz". Normalmente, ele é criado automaticamente quando você inicia um novo projeto. Por exemplo, se você usar [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), o componente raiz é definido em `src/App.js`. Se você usar o framework [Next.js](https://nextjs.org/), o componente raiz é definido em `pages/index.js`. Nesses exemplos, você exportou componentes raiz.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+A maioria das aplicações React usa componentes em todos os níveis. Isso significa que você não usará componentes apenas para partes reutilizáveis, como botões, mas também para partes maiores, como barras laterais, listas e até em páginas inteiras! Os componentes são uma maneira prática de organizar o código e o HTML da UI, mesmo que alguns deles sejam usados apenas uma vez.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+Os [Frameworks React](/learn/start-a-new-react-project) levam isso um passo adiante. Em vez de usar um arquivo HTML vazio e deixar o React "assumir" o gerenciamento da página com JavaScript, eles *também* geram o HTML automaticamente a partir de seus componentes React. Isso permite que seu aplicativo mostre algum conteúdo antes que o código JavaScript seja carregado.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ainda assim, muitos sites usam o React apenas para [adicionar interatividade às páginas HTML existentes.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Eles têm muitos componentes raiz em vez de um único para toda a página. Você pode usar o React na medida certa para atender as suas necessidades.
-You've just gotten your first taste of React! Let's recap some key points.
+Você acabou de ter um gostinho do React! Vamos recapitular alguns pontos importantes.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* O React permite que você crie componentes, **elementos de UI reutilizáveis para sua aplicação.**
+* Em uma aplicação React, cada parte da UI é um componente.
+* Os componentes do React são funções comuns do JavaScript, mas com duas diferenças importantes:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Seus nomes sempre começam com letra maiúscula.
+ 2. Eles retornam JSX.
@@ -238,9 +237,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportar o componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Este sandbox não funciona porque o componente raiz não é exportado:
@@ -261,11 +260,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Tente resolver o problema antes de ver a solução!
-Add `export default` before the function definition like so:
+Adicione o prefixo `export default` antes da definição da função, da seguinte forma:
@@ -286,17 +285,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Você pode estar se perguntando por que escrever `export` sozinho não é o suficiente para corrigir este exemplo. Você pode aprender a diferença entre `export` e `export default` em [Importando e Exportando Componentes.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corrija a declaração de retorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Há algo errado na declaração `return`. Você consegue corrigir?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Você pode receber um erro "Unexpected token" ao tentar corrigir isso. Nesse caso, verifique se o ponto e vírgula aparece *depois* do parêntese de fechamento. Deixar um ponto-e-vírgula dentro de `return ( )` causará um erro.
@@ -318,7 +317,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Você pode corrigir esse componente movendo a instrução de retorno para uma linha da seguinte forma:
@@ -334,7 +333,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Outra opção é envolver o JSX retornado entre parênteses após a declaração `return`:
@@ -357,9 +356,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Identifique o erro {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Algo está errado com a forma como o componente `Profile` é declarado e usado. Você consegue identificar o erro? (Tente lembrar como o React distingue os componentes das tags HTML!)
@@ -376,7 +375,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-React component names must start with a capital letter.
+Os nomes dos componentes React devem começar com uma letra maiúscula.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +411,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-#### Your own component {/*your-own-component*/}
+#### Seu próprio componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Escreva um componente do zero. Você pode dar a ele qualquer nome válido e retornar qualquer JSX. Se você está sem ideias, você pode escrever um componente `Congratulations` que mostre `Bom trabalho!
`. Não se esqueça de exportá-lo!
```js
-// Write your component below!
-
+// Escreva seu componente abaixo!
```
@@ -449,7 +447,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bom trabalho!
);
}
```
`, e um índice de conteúdo (abreviado) apresentado como uma lista ordenada ``. Este conjunto de tags, combinado com CSS para estilização e JavaScript para a interatividade, é responsável por cada elemento de UI que você vê na Web — seja uma barra lateral, avatar, modal ou dropdown.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+O React permite que você combine tags HTML, CSS e JavaScript em "componentes" personalizados, **elementos de UI reutilizáveis para a sua aplicação.** O código do índice de conteúdo que você viu acima pode ser transformado em um componente ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Assim como nas tags HTML, você pode compor, ordenar e colocá-lo dentro de outros componentes para criar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:
```js
@@ -50,12 +50,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
+À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos através da reutilização de componentes que você já escreveu, acelerando seu desenvolvimento. Nosso índice de conteúdo acima poderia ser usado em qualquer tela usando o componente `
@@ -76,33 +75,33 @@ img { height: 200px; }
-And here's how to build a component:
+Agora vamos aprender como construir um componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Passo 1: Exportar o componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+O prefixo `export default` é uma [sintaxe padrão do JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (não específica do React). Ele permite que você marque a função principal em um arquivo para que você possa mais tarde importá-la de outros arquivos. (Mais sobre importação em [Importando e Exportando Componentes](/learn/importing-and-exporting-components)!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Passo 2: Definir a função {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Com a sintaxe `function Profile() { }` você está definindo uma função JavaScript chamada `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Os componentes do React são funções comuns do JavaScript, mas **seus nomes devem começar com letra maiúscula** ou não funcionarão!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Passo 3: Adicionar HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+O componente retorna uma tag `![]()
` com os atributos `src` e `alt`. O `![]()
` é escrito como HTML, mas na verdade, é o JavaScript que está por trás! Essa sintaxe é chamada [JSX](/learn/writing-markup-with-jsx) e permite usar tags HTML dentro do JavaScript.
-Return statements can be written all on one line, as in this component:
+As instruções de retorno podem ser escritas todas em uma linha, como neste componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mas se seu HTML não estiver na mesma linha que a declaração `return`, você deve colocá-la entre parênteses:
```js
return (
@@ -114,13 +113,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sem parênteses, qualquer código nas linhas após `return` [será ignorado](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usando um componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Agora que você definiu seu componente `Profile`, você pode colocá-lo dentro de outros componentes. Por exemplo, você pode exportar um componente `Gallery` que usa várias vezes o componente `Profile`:
@@ -137,7 +136,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-### What the browser sees {/*what-the-browser-sees*/}
+### O que o navegador vê {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Observe a diferença entre caixa alta e caixa baixa no nome dos componentes:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` é minúscula, então o React sabe que nos referimos a uma tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E o componente `Profile` contém ainda mais HTML, como a tag `![]()
`. No final, é isso que o navegador vê:
```html
- Amazing scientists
+ Cientistas incríveis
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Agrupando e organizando componentes {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Os componentes são funções comuns do JavaScript, portanto, você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou relacionados entre si. Caso o arquivo comece a ficar muito extenso, você pode sempre mover `Profile` para um arquivo separado. Você aprenderá como fazer isso em breve na [página sobre importações.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Como os componentes `Profile` são renderizados dentro da `Gallery`—mesmo várias vezes—, podemos dizer que `Gallery` é um **componente pai**, tornando cada `Profile` como um componente "filho". Essa é parte da magia do React: você pode definir um componente uma vez e usá-lo em quantos lugares e quantas vezes quiser.
-Components can render other components, but **you must never nest their definitions:**
+Componentes podem renderizar outros componentes, mas **você nunca deve definir um componente dentro de outro componente:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Nunca defina um componente dentro de outro componente!
function Profile() {
// ...
}
@@ -190,47 +189,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+O trecho acima é [muito lento e causa erros.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Em vez disso, defina todos os componentes no nível superior:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Declare componentes no nível superior
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando um componente filho precisa de alguns dados de um pai, [passe-os por props](/learn/passing-props-to-a-component) em vez de definições de aninhamento.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componentes em todos os níveis {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Sua aplicação React começa em um componente "raiz". Normalmente, ele é criado automaticamente quando você inicia um novo projeto. Por exemplo, se você usar [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), o componente raiz é definido em `src/App.js`. Se você usar o framework [Next.js](https://nextjs.org/), o componente raiz é definido em `pages/index.js`. Nesses exemplos, você exportou componentes raiz.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+A maioria das aplicações React usa componentes em todos os níveis. Isso significa que você não usará componentes apenas para partes reutilizáveis, como botões, mas também para partes maiores, como barras laterais, listas e até em páginas inteiras! Os componentes são uma maneira prática de organizar o código e o HTML da UI, mesmo que alguns deles sejam usados apenas uma vez.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+Os [Frameworks React](/learn/start-a-new-react-project) levam isso um passo adiante. Em vez de usar um arquivo HTML vazio e deixar o React "assumir" o gerenciamento da página com JavaScript, eles *também* geram o HTML automaticamente a partir de seus componentes React. Isso permite que seu aplicativo mostre algum conteúdo antes que o código JavaScript seja carregado.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ainda assim, muitos sites usam o React apenas para [adicionar interatividade às páginas HTML existentes.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Eles têm muitos componentes raiz em vez de um único para toda a página. Você pode usar o React na medida certa para atender as suas necessidades.
-You've just gotten your first taste of React! Let's recap some key points.
+Você acabou de ter um gostinho do React! Vamos recapitular alguns pontos importantes.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* O React permite que você crie componentes, **elementos de UI reutilizáveis para sua aplicação.**
+* Em uma aplicação React, cada parte da UI é um componente.
+* Os componentes do React são funções comuns do JavaScript, mas com duas diferenças importantes:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Seus nomes sempre começam com letra maiúscula.
+ 2. Eles retornam JSX.
@@ -238,9 +237,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportar o componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Este sandbox não funciona porque o componente raiz não é exportado:
@@ -261,11 +260,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Tente resolver o problema antes de ver a solução!
-Add `export default` before the function definition like so:
+Adicione o prefixo `export default` antes da definição da função, da seguinte forma:
@@ -286,17 +285,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Você pode estar se perguntando por que escrever `export` sozinho não é o suficiente para corrigir este exemplo. Você pode aprender a diferença entre `export` e `export default` em [Importando e Exportando Componentes.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corrija a declaração de retorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Há algo errado na declaração `return`. Você consegue corrigir?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Você pode receber um erro "Unexpected token" ao tentar corrigir isso. Nesse caso, verifique se o ponto e vírgula aparece *depois* do parêntese de fechamento. Deixar um ponto-e-vírgula dentro de `return ( )` causará um erro.
@@ -318,7 +317,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Você pode corrigir esse componente movendo a instrução de retorno para uma linha da seguinte forma:
@@ -334,7 +333,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Outra opção é envolver o JSX retornado entre parênteses após a declaração `return`:
@@ -357,9 +356,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Identifique o erro {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Algo está errado com a forma como o componente `Profile` é declarado e usado. Você consegue identificar o erro? (Tente lembrar como o React distingue os componentes das tags HTML!)
@@ -376,7 +375,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-React component names must start with a capital letter.
+Os nomes dos componentes React devem começar com uma letra maiúscula.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +411,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-#### Your own component {/*your-own-component*/}
+#### Seu próprio componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Escreva um componente do zero. Você pode dar a ele qualquer nome válido e retornar qualquer JSX. Se você está sem ideias, você pode escrever um componente `Congratulations` que mostre `Bom trabalho!
`. Não se esqueça de exportá-lo!
```js
-// Write your component below!
-
+// Escreva seu componente abaixo!
```
@@ -449,7 +447,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bom trabalho!
);
}
```
`, etc.
+O React permite que você combine tags HTML, CSS e JavaScript em "componentes" personalizados, **elementos de UI reutilizáveis para a sua aplicação.** O código do índice de conteúdo que você viu acima pode ser transformado em um componente ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Assim como nas tags HTML, você pode compor, ordenar e colocá-lo dentro de outros componentes para criar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:
```js
@@ -50,12 +50,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
+À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos através da reutilização de componentes que você já escreveu, acelerando seu desenvolvimento. Nosso índice de conteúdo acima poderia ser usado em qualquer tela usando o componente `
@@ -76,33 +75,33 @@ img { height: 200px; }
-And here's how to build a component:
+Agora vamos aprender como construir um componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Passo 1: Exportar o componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+O prefixo `export default` é uma [sintaxe padrão do JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (não específica do React). Ele permite que você marque a função principal em um arquivo para que você possa mais tarde importá-la de outros arquivos. (Mais sobre importação em [Importando e Exportando Componentes](/learn/importing-and-exporting-components)!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Passo 2: Definir a função {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Com a sintaxe `function Profile() { }` você está definindo uma função JavaScript chamada `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Os componentes do React são funções comuns do JavaScript, mas **seus nomes devem começar com letra maiúscula** ou não funcionarão!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Passo 3: Adicionar HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+O componente retorna uma tag `![]()
` com os atributos `src` e `alt`. O `![]()
` é escrito como HTML, mas na verdade, é o JavaScript que está por trás! Essa sintaxe é chamada [JSX](/learn/writing-markup-with-jsx) e permite usar tags HTML dentro do JavaScript.
-Return statements can be written all on one line, as in this component:
+As instruções de retorno podem ser escritas todas em uma linha, como neste componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mas se seu HTML não estiver na mesma linha que a declaração `return`, você deve colocá-la entre parênteses:
```js
return (
@@ -114,13 +113,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sem parênteses, qualquer código nas linhas após `return` [será ignorado](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usando um componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Agora que você definiu seu componente `Profile`, você pode colocá-lo dentro de outros componentes. Por exemplo, você pode exportar um componente `Gallery` que usa várias vezes o componente `Profile`:
@@ -137,7 +136,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-### What the browser sees {/*what-the-browser-sees*/}
+### O que o navegador vê {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Observe a diferença entre caixa alta e caixa baixa no nome dos componentes:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` é minúscula, então o React sabe que nos referimos a uma tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E o componente `Profile` contém ainda mais HTML, como a tag `![]()
`. No final, é isso que o navegador vê:
```html
- Amazing scientists
+ Cientistas incríveis
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Agrupando e organizando componentes {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Os componentes são funções comuns do JavaScript, portanto, você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou relacionados entre si. Caso o arquivo comece a ficar muito extenso, você pode sempre mover `Profile` para um arquivo separado. Você aprenderá como fazer isso em breve na [página sobre importações.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Como os componentes `Profile` são renderizados dentro da `Gallery`—mesmo várias vezes—, podemos dizer que `Gallery` é um **componente pai**, tornando cada `Profile` como um componente "filho". Essa é parte da magia do React: você pode definir um componente uma vez e usá-lo em quantos lugares e quantas vezes quiser.
-Components can render other components, but **you must never nest their definitions:**
+Componentes podem renderizar outros componentes, mas **você nunca deve definir um componente dentro de outro componente:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Nunca defina um componente dentro de outro componente!
function Profile() {
// ...
}
@@ -190,47 +189,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+O trecho acima é [muito lento e causa erros.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Em vez disso, defina todos os componentes no nível superior:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Declare componentes no nível superior
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando um componente filho precisa de alguns dados de um pai, [passe-os por props](/learn/passing-props-to-a-component) em vez de definições de aninhamento.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componentes em todos os níveis {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Sua aplicação React começa em um componente "raiz". Normalmente, ele é criado automaticamente quando você inicia um novo projeto. Por exemplo, se você usar [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), o componente raiz é definido em `src/App.js`. Se você usar o framework [Next.js](https://nextjs.org/), o componente raiz é definido em `pages/index.js`. Nesses exemplos, você exportou componentes raiz.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+A maioria das aplicações React usa componentes em todos os níveis. Isso significa que você não usará componentes apenas para partes reutilizáveis, como botões, mas também para partes maiores, como barras laterais, listas e até em páginas inteiras! Os componentes são uma maneira prática de organizar o código e o HTML da UI, mesmo que alguns deles sejam usados apenas uma vez.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+Os [Frameworks React](/learn/start-a-new-react-project) levam isso um passo adiante. Em vez de usar um arquivo HTML vazio e deixar o React "assumir" o gerenciamento da página com JavaScript, eles *também* geram o HTML automaticamente a partir de seus componentes React. Isso permite que seu aplicativo mostre algum conteúdo antes que o código JavaScript seja carregado.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ainda assim, muitos sites usam o React apenas para [adicionar interatividade às páginas HTML existentes.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Eles têm muitos componentes raiz em vez de um único para toda a página. Você pode usar o React na medida certa para atender as suas necessidades.
-You've just gotten your first taste of React! Let's recap some key points.
+Você acabou de ter um gostinho do React! Vamos recapitular alguns pontos importantes.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* O React permite que você crie componentes, **elementos de UI reutilizáveis para sua aplicação.**
+* Em uma aplicação React, cada parte da UI é um componente.
+* Os componentes do React são funções comuns do JavaScript, mas com duas diferenças importantes:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Seus nomes sempre começam com letra maiúscula.
+ 2. Eles retornam JSX.
@@ -238,9 +237,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportar o componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Este sandbox não funciona porque o componente raiz não é exportado:
@@ -261,11 +260,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Tente resolver o problema antes de ver a solução!
-Add `export default` before the function definition like so:
+Adicione o prefixo `export default` antes da definição da função, da seguinte forma:
@@ -286,17 +285,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Você pode estar se perguntando por que escrever `export` sozinho não é o suficiente para corrigir este exemplo. Você pode aprender a diferença entre `export` e `export default` em [Importando e Exportando Componentes.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corrija a declaração de retorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Há algo errado na declaração `return`. Você consegue corrigir?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Você pode receber um erro "Unexpected token" ao tentar corrigir isso. Nesse caso, verifique se o ponto e vírgula aparece *depois* do parêntese de fechamento. Deixar um ponto-e-vírgula dentro de `return ( )` causará um erro.
@@ -318,7 +317,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Você pode corrigir esse componente movendo a instrução de retorno para uma linha da seguinte forma:
@@ -334,7 +333,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Outra opção é envolver o JSX retornado entre parênteses após a declaração `return`:
@@ -357,9 +356,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Identifique o erro {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Algo está errado com a forma como o componente `Profile` é declarado e usado. Você consegue identificar o erro? (Tente lembrar como o React distingue os componentes das tags HTML!)
@@ -376,7 +375,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-React component names must start with a capital letter.
+Os nomes dos componentes React devem começar com uma letra maiúscula.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +411,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-#### Your own component {/*your-own-component*/}
+#### Seu próprio componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Escreva um componente do zero. Você pode dar a ele qualquer nome válido e retornar qualquer JSX. Se você está sem ideias, você pode escrever um componente `Congratulations` que mostre `Bom trabalho!
`. Não se esqueça de exportá-lo!
```js
-// Write your component below!
-
+// Escreva seu componente abaixo!
```
@@ -449,7 +447,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bom trabalho!
);
}
```
`, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Assim como nas tags HTML, você pode compor, ordenar e colocá-lo dentro de outros componentes para criar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:
```js
@@ -50,12 +50,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
+À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos através da reutilização de componentes que você já escreveu, acelerando seu desenvolvimento. Nosso índice de conteúdo acima poderia ser usado em qualquer tela usando o componente `
@@ -76,33 +75,33 @@ img { height: 200px; }
-And here's how to build a component:
+Agora vamos aprender como construir um componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Passo 1: Exportar o componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+O prefixo `export default` é uma [sintaxe padrão do JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (não específica do React). Ele permite que você marque a função principal em um arquivo para que você possa mais tarde importá-la de outros arquivos. (Mais sobre importação em [Importando e Exportando Componentes](/learn/importing-and-exporting-components)!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Passo 2: Definir a função {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Com a sintaxe `function Profile() { }` você está definindo uma função JavaScript chamada `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Os componentes do React são funções comuns do JavaScript, mas **seus nomes devem começar com letra maiúscula** ou não funcionarão!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Passo 3: Adicionar HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+O componente retorna uma tag `![]()
` com os atributos `src` e `alt`. O `![]()
` é escrito como HTML, mas na verdade, é o JavaScript que está por trás! Essa sintaxe é chamada [JSX](/learn/writing-markup-with-jsx) e permite usar tags HTML dentro do JavaScript.
-Return statements can be written all on one line, as in this component:
+As instruções de retorno podem ser escritas todas em uma linha, como neste componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mas se seu HTML não estiver na mesma linha que a declaração `return`, você deve colocá-la entre parênteses:
```js
return (
@@ -114,13 +113,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sem parênteses, qualquer código nas linhas após `return` [será ignorado](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usando um componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Agora que você definiu seu componente `Profile`, você pode colocá-lo dentro de outros componentes. Por exemplo, você pode exportar um componente `Gallery` que usa várias vezes o componente `Profile`:
@@ -137,7 +136,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-### What the browser sees {/*what-the-browser-sees*/}
+### O que o navegador vê {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Observe a diferença entre caixa alta e caixa baixa no nome dos componentes:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` é minúscula, então o React sabe que nos referimos a uma tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E o componente `Profile` contém ainda mais HTML, como a tag `![]()
`. No final, é isso que o navegador vê:
```html
- Amazing scientists
+ Cientistas incríveis
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Agrupando e organizando componentes {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Os componentes são funções comuns do JavaScript, portanto, você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou relacionados entre si. Caso o arquivo comece a ficar muito extenso, você pode sempre mover `Profile` para um arquivo separado. Você aprenderá como fazer isso em breve na [página sobre importações.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Como os componentes `Profile` são renderizados dentro da `Gallery`—mesmo várias vezes—, podemos dizer que `Gallery` é um **componente pai**, tornando cada `Profile` como um componente "filho". Essa é parte da magia do React: você pode definir um componente uma vez e usá-lo em quantos lugares e quantas vezes quiser.
-Components can render other components, but **you must never nest their definitions:**
+Componentes podem renderizar outros componentes, mas **você nunca deve definir um componente dentro de outro componente:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Nunca defina um componente dentro de outro componente!
function Profile() {
// ...
}
@@ -190,47 +189,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+O trecho acima é [muito lento e causa erros.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Em vez disso, defina todos os componentes no nível superior:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Declare componentes no nível superior
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando um componente filho precisa de alguns dados de um pai, [passe-os por props](/learn/passing-props-to-a-component) em vez de definições de aninhamento.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componentes em todos os níveis {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Sua aplicação React começa em um componente "raiz". Normalmente, ele é criado automaticamente quando você inicia um novo projeto. Por exemplo, se você usar [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), o componente raiz é definido em `src/App.js`. Se você usar o framework [Next.js](https://nextjs.org/), o componente raiz é definido em `pages/index.js`. Nesses exemplos, você exportou componentes raiz.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+A maioria das aplicações React usa componentes em todos os níveis. Isso significa que você não usará componentes apenas para partes reutilizáveis, como botões, mas também para partes maiores, como barras laterais, listas e até em páginas inteiras! Os componentes são uma maneira prática de organizar o código e o HTML da UI, mesmo que alguns deles sejam usados apenas uma vez.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+Os [Frameworks React](/learn/start-a-new-react-project) levam isso um passo adiante. Em vez de usar um arquivo HTML vazio e deixar o React "assumir" o gerenciamento da página com JavaScript, eles *também* geram o HTML automaticamente a partir de seus componentes React. Isso permite que seu aplicativo mostre algum conteúdo antes que o código JavaScript seja carregado.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ainda assim, muitos sites usam o React apenas para [adicionar interatividade às páginas HTML existentes.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Eles têm muitos componentes raiz em vez de um único para toda a página. Você pode usar o React na medida certa para atender as suas necessidades.
-You've just gotten your first taste of React! Let's recap some key points.
+Você acabou de ter um gostinho do React! Vamos recapitular alguns pontos importantes.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* O React permite que você crie componentes, **elementos de UI reutilizáveis para sua aplicação.**
+* Em uma aplicação React, cada parte da UI é um componente.
+* Os componentes do React são funções comuns do JavaScript, mas com duas diferenças importantes:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Seus nomes sempre começam com letra maiúscula.
+ 2. Eles retornam JSX.
@@ -238,9 +237,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportar o componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Este sandbox não funciona porque o componente raiz não é exportado:
@@ -261,11 +260,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Tente resolver o problema antes de ver a solução!
-Add `export default` before the function definition like so:
+Adicione o prefixo `export default` antes da definição da função, da seguinte forma:
@@ -286,17 +285,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Você pode estar se perguntando por que escrever `export` sozinho não é o suficiente para corrigir este exemplo. Você pode aprender a diferença entre `export` e `export default` em [Importando e Exportando Componentes.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corrija a declaração de retorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Há algo errado na declaração `return`. Você consegue corrigir?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Você pode receber um erro "Unexpected token" ao tentar corrigir isso. Nesse caso, verifique se o ponto e vírgula aparece *depois* do parêntese de fechamento. Deixar um ponto-e-vírgula dentro de `return ( )` causará um erro.
@@ -318,7 +317,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Você pode corrigir esse componente movendo a instrução de retorno para uma linha da seguinte forma:
@@ -334,7 +333,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Outra opção é envolver o JSX retornado entre parênteses após a declaração `return`:
@@ -357,9 +356,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Identifique o erro {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Algo está errado com a forma como o componente `Profile` é declarado e usado. Você consegue identificar o erro? (Tente lembrar como o React distingue os componentes das tags HTML!)
@@ -376,7 +375,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-React component names must start with a capital letter.
+Os nomes dos componentes React devem começar com uma letra maiúscula.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +411,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Cientistas incríveis
-#### Your own component {/*your-own-component*/}
+#### Seu próprio componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Escreva um componente do zero. Você pode dar a ele qualquer nome válido e retornar qualquer JSX. Se você está sem ideias, você pode escrever um componente `Congratulations` que mostre `Bom trabalho!
`. Não se esqueça de exportá-lo!
```js
-// Write your component below!
-
+// Escreva seu componente abaixo!
```
@@ -449,7 +447,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bom trabalho!
);
}
```
Amazing scientists
+Cientistas incríveis
Amazing scientists
+Cientistas incríveis