Skip to content

Commit b8d4cb1

Browse files
Merge pull request #9 from shmesa22/rendering-elements-translation
Rendering Elements translation Closes #12
2 parents 7cf4885 + 528eb7a commit b8d4cb1

File tree

1 file changed

+27
-27
lines changed

1 file changed

+27
-27
lines changed

content/docs/rendering-elements.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
11
---
22
id: rendering-elements
3-
title: Rendering Elements
3+
title: Renderizando Elementos
44
permalink: docs/rendering-elements.html
55
redirect_from:
66
- "docs/displaying-data.html"
77
prev: introducing-jsx.html
88
next: components-and-props.html
99
---
1010

11-
Elements are the smallest building blocks of React apps.
11+
Los elementos son los bloques más pequeños de las aplicaciones de React.
1212

13-
An element describes what you want to see on the screen:
13+
Un elemento describe lo que quieres ver en la pantalla:
1414

1515
```js
16-
const element = <h1>Hello, world</h1>;
16+
const element = <h1>Hola, mundo</h1>;
1717
```
1818

19-
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.
19+
A diferencia de los elementos del DOM de los navegadores, los elementos de React son objetos planos, y su creación es de bajo costo. React DOM se encarga de actualizar el DOM para igualar los elementos de React.
2020

21-
>**Note:**
21+
>**Nota:**
2222
>
23-
>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.
23+
>Uno podría confundir los elementos con el muy conocido concepto de "componentes". En la [siguiente sección](/docs/components-and-props.html) hablaremos de componentes. Los elementos son los que "constituyen" los componentes, y recomendamos leer esta sección antes de continuar.
2424
25-
## Rendering an Element into the DOM
25+
## Renderizando un Elemento en el DOM
2626

27-
Let's say there is a `<div>` somewhere in your HTML file:
27+
Digamos que hay un `<div>` en alguna parte de tu archivo HTML:
2828

2929
```html
3030
<div id="root"></div>
3131
```
3232

33-
We call this a "root" DOM node because everything inside it will be managed by React DOM.
33+
Lo llamamos un nodo "raíz" porque todo lo que esté dentro de él será manejado por React DOM.
3434

35-
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.
35+
Las aplicaciones construidas solamente con React usualmente tienen un único nodo raíz en el DOM. Dado el caso que estés integrando React en una aplicación existente, puedes tener tantos nodos raíz del DOM aislados como quieras.
3636

37-
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
37+
Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a `ReactDOM.render()`:
3838

3939
`embed:rendering-elements/render-an-element.js`
4040

4141
[](codepen://rendering-elements/render-an-element)
4242

43-
It displays "Hello, world" on the page.
43+
Esto muestra "Hello, world" en la página.
4444

45-
## Updating the Rendered Element
45+
## Actualizando el Elemento Renderizado
4646

47-
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.
47+
Los elementos de React son [inmutables](https://en.wikipedia.org/wiki/Immutable_object). Una vez creas un elemento, no puedes cambiar sus hijos o atributos. Un elemento es como un fotograma solitario en una película: este representa la IU en cierto punto en el tiempo.
4848

49-
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
49+
Con nuestro conocimiento hasta este punto, la única manera de actualizar la IU es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`.
5050

51-
Consider this ticking clock example:
51+
Considera este ejemplo de un reloj en marcha:
5252

5353
`embed:rendering-elements/update-rendered-element.js`
5454

5555
[](codepen://rendering-elements/update-rendered-element)
5656

57-
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
57+
Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
5858

59-
>**Note:**
59+
>**Nota:**
6060
>
61-
>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).
61+
>En la práctica, la mayoría de las aplicaciones de React solo llama `ReactDOM.render()` una vez. En las siguientes secciones aprenderemos cómo el código se puede encapsular en [componentes con estado](/docs/state-and-lifecycle.html).
6262
>
63-
>We recommend that you don't skip topics because they build on each other.
63+
>Recomendamos que no te saltes ningún tema porque estos se relacionan entre ellos.
6464
65-
## React Only Updates What's Necessary
65+
## React Solo Actualiza lo que es Necesario
6666

67-
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.
67+
React DOM compara el elemento y su hijos con el elemento anterior, y solo aplica las actualizaciones del DOM que son necesarias para que el DOM esté en el estado deseado.
6868

69-
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
69+
Puedes verificar esto inspeccionando el [último ejemplo](codepen://rendering-elements/update-rendered-element) con las herramientas del navegador:
7070

71-
![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
71+
![inspector del DOM mostrando actualizaciones diminutas](../images/docs/granular-dom-updates.gif)
7272

73-
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.
73+
Aunque creamos un elemento que describe el árbol de la IU en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió.
7474

75-
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.
75+
En nuestra experiencia, pensar en cómo la IU debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores.

0 commit comments

Comments
 (0)