Skip to content

Commit

Permalink
Translate Rendering Elements (#49)
Browse files Browse the repository at this point in the history
* 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
mathsalmi authored and glaucia86 committed Feb 10, 2019
1 parent 325762f commit 11a9d21
Showing 1 changed file with 26 additions and 26 deletions.
52 changes: 26 additions & 26 deletions content/docs/rendering-elements.md
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:

![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
![Ferramenta de inspecionar elemento do DOM mostrando atualizações granulares](../images/docs/granular-dom-updates.gif)

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.

0 comments on commit 11a9d21

Please sign in to comment.