Translate: Rendering Elements docs

Author: simonhoyos

content/docs/rendering-elements.md

@@ -1,6 +1,6 @@
 ---
 id: rendering-elements
-title: Rendering Elements
+title: Renderizando Elementos
 permalink: docs/rendering-elements.html
 redirect_from:
   - "docs/displaying-data.html"
@@ -18,58 +18,58 @@ const element = <h1>Hola, mundo</h1>;
 
 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.
 
->**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.
+>Uno podría confundir los elementos con el muy conocido concepto de "componentes". En la siguiente sección [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.
 
-## Rendering an Element into the DOM
+## Renderizando un Elemento en el DOM
 
-Let's say there is a `<div>` somewhere in your HTML file:
+Digamos que hay un `<div>` en alguna parte de tu archivo HTML:
 
 ```html
 <div id="root"></div>
 ```
 
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
+Nosotros lo llamamos un nodo "raíz" porque todo lo que esté dentro de él será manejado por 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.
+Las aplicaciones construidas con solo React usualmente tienen un único nodo raíz en el DOM. Dado el caso que estés integrando React en una aplicación existente, podrías tener cuantos nodos raíz en el DOM como quieras.
 
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
+Para renderizar un elemento de React en el nodo raíz del DOM, ambos se pasan a `ReactDOM.render()`:
 
 `embed:rendering-elements/render-an-element.js`
 
 [](codepen://rendering-elements/render-an-element)
 
-It displays "Hello, world" on the page.
+Esto muestra "Hello, world" en la página.
 
-## Updating the Rendered Element
+## Actualizando el Elemento Renderizado
 
-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.
+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 marco solitario en una película: este representa la Interfaz Gráfica en cierto punto en el tiempo.
 
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
+Con nuestro conocimiento hasta este punto, la única manera de actualizar la Interfaz Gráfica es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`.
 
-Consider this ticking clock example:
+Considera este ejemplo de un reloj en marcha:
 
 `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.
+Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
 
->**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).
+>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).
 >
->We recommend that you don't skip topics because they build on each other.
+>Nosotros recomendamos que no te saltes ningún tema porque estos se relacionan entre ellos.
 
-## React Only Updates What's Necessary
+## React Solo Actualiza lo que es Necesario
 
-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.
+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.
 
-You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
+Esto puedes verificarlo inspeccionando el [último ejemplo](codepen://rendering-elements/update-rendered-element) con las herramientas del navegador:
 
-![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
+![inspector del DOM mostrando actualizaciones diminutas](../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.
+Aunque creamos un elemento que describe el árbol de la Interfaz Gráfica en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió.
 
-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.
+En nuestra experiencia, pensar en cómo la Interfaz Gráfica debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina todo clase de errores.