-
Notifications
You must be signed in to change notification settings - Fork 312
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Translate 'Rendering Elements' into pt-BR. * Replacing 'bugs' with 'erros' * Update content/docs/rendering-elements.md Co-Authored-By: mathsalmi <[email protected]> * Replace 'raízes' with 'raiz' * Update rendering-elements.md
- Loading branch information
Showing
1 changed file
with
26 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,75 +1,75 @@ | ||
--- | ||
id: rendering-elements | ||
title: Rendering Elements | ||
title: Renderizando Elementos | ||
permalink: docs/rendering-elements.html | ||
redirect_from: | ||
- "docs/displaying-data.html" | ||
prev: introducing-jsx.html | ||
next: components-and-props.html | ||
--- | ||
|
||
Elements are the smallest building blocks of React apps. | ||
Elementos são os menores blocos de construção de aplicativos React. | ||
|
||
An element describes what you want to see on the screen: | ||
Um elemento descreve o que você quer ver na tela: | ||
|
||
```js | ||
const element = <h1>Hello, world</h1>; | ||
``` | ||
|
||
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. | ||
Diferente de elementos DOM do navegador, elementos React são objetos simples e utilizam menos recursos. O React DOM é o responsável por atualizar o DOM para exibir os elementos React. | ||
|
||
>**Note:** | ||
>**Nota:** | ||
> | ||
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. | ||
>Pode-se confundir elementos com o conceito mais amplo de "componentes". Nós apresentaremos os componentes na [seção seguinte](/docs/components-and-props.html). Elementos compõem os componentes e nós recomendamos ler esta seção antes de prosseguir. | ||
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} | ||
## Renderizando um Elemento no DOM {#rendering-an-element-into-the-dom} | ||
|
||
Let's say there is a `<div>` somewhere in your HTML file: | ||
Suponhamos que exista um `<div>` em algum lugar do seu código HTML: | ||
|
||
```html | ||
<div id="root"></div> | ||
``` | ||
|
||
We call this a "root" DOM node because everything inside it will be managed by React DOM. | ||
Nós o chamamos de nó raiz do DOM porque tudo dentro dele será gerenciado pelo React DOM. | ||
|
||
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. | ||
Aplicações construídas apenas com React geralmente tem apenas um único nó raiz no DOM. Se deseja integrar o React a uma aplicação existente, você pode ter quantos nós raiz precisar. | ||
|
||
To render a React element into a root DOM node, pass both to `ReactDOM.render()`: | ||
Para renderizar um elemento React em um nó raiz, passe ambos para `ReactDOM.render()`: | ||
|
||
`embed:rendering-elements/render-an-element.js` | ||
|
||
[](codepen://rendering-elements/render-an-element) | ||
|
||
It displays "Hello, world" on the page. | ||
Assim, é exibido "Hello, world" na página. | ||
|
||
## Updating the Rendered Element {#updating-the-rendered-element} | ||
## Atualizando o Elemento Renderizado {#updating-the-rendered-element} | ||
|
||
React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. | ||
Elementos React são [imutáveis](https://pt.wikipedia.org/wiki/Objeto_imutável). Uma vez criados, você não pode alterar seus elementos filhos ou atributos. | ||
|
||
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. | ||
Com o que aprendemos até agora, a única forma de atualizar a interface é criar um novo elemento e passá-lo para `ReactDOM.render()`. | ||
|
||
Consider this ticking clock example: | ||
Veja o seguinte exemplo de um relógio: | ||
|
||
`embed:rendering-elements/update-rendered-element.js` | ||
|
||
[](codepen://rendering-elements/update-rendered-element) | ||
|
||
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. | ||
Chama-se o `ReactDOM.render()` a cada segundo a partir de um callback do [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). | ||
|
||
>**Note:** | ||
>**Nota:** | ||
> | ||
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). | ||
>Na prática, a maioria dos aplicativos React usam o `ReactDOM.render()` apenas uma única vez. Nas seções seguintes, aprenderemos como esse código pode ser encapsulado em [componentes com estado](/docs/state-and-lifecycle.html). | ||
> | ||
>We recommend that you don't skip topics because they build on each other. | ||
>Recomendamos que você não pule os tópicos porque eles se complementam. | ||
## React Only Updates What's Necessary {#react-only-updates-whats-necessary} | ||
## O React Somente Atualiza o Necessário {#react-only-updates-whats-necessary} | ||
|
||
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. | ||
O React DOM compara o elemento novo e seus filhos com os anteriores e somente aplica as modificações necessárias no DOM para levá-lo ao estado desejado. | ||
|
||
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: | ||
Você pode observar isso inspecionando o [último exemplo](codepen://rendering-elements/update-rendered-element) com as ferramentas do navegador: | ||
|
||
 | ||
 | ||
|
||
Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. | ||
Embora nós criemos um elemento descrevendo toda a estrutura da interface a cada segundo, somente o nó de texto cujo conteúdo muda é atualizado pelo React DOM. | ||
|
||
In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. | ||
Em nossa experiência, pensar em como a interface deve estar em um determinado momento, ao invés de pensar como modificá-la com o tempo, evita uma série de erros. |