From c193606cb01ce3aeb982c509314d8335f9944214 Mon Sep 17 00:00:00 2001 From: Simon Hoyos Date: Thu, 31 Jan 2019 15:50:42 -0500 Subject: [PATCH 1/4] WIP: rendering elements translation --- content/docs/rendering-elements.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index d56b00001..ac2913fff 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -8,15 +8,15 @@ prev: introducing-jsx.html next: components-and-props.html --- -Elements are the smallest building blocks of React apps. +Los elementos son los bloques más pequeños de las aplicaciones de React. -An element describes what you want to see on the screen: +Un elemento describe lo que quieres ver en la pantalla: ```js -const element =

Hello, world

; +const element =

Hola, mundo

; ``` -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. +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:** > From 4c4f126f645791769ba3283168ecb45f56e0429b Mon Sep 17 00:00:00 2001 From: Simon Hoyos Date: Thu, 31 Jan 2019 16:38:02 -0500 Subject: [PATCH 2/4] Translate: Rendering Elements docs --- content/docs/rendering-elements.md | 46 +++++++++++++++--------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index ac2913fff..5c532c210 100644 --- a/content/docs/rendering-elements.md +++ b/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 =

Hola, mundo

; 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 `
` somewhere in your HTML file: +Digamos que hay un `
` en alguna parte de tu archivo HTML: ```html
``` -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. From 60a479cb32fa91a1d47fc8e5756e71cf670c92a2 Mon Sep 17 00:00:00 2001 From: Simon Hoyos Date: Thu, 31 Jan 2019 18:27:32 -0500 Subject: [PATCH 3/4] Address PR comments --- content/docs/rendering-elements.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 5c532c210..dd586a15a 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -20,7 +20,7 @@ A diferencia de los elementos del DOM de los navegadores, los elementos de React >**Nota:** > ->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. +>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. ## Renderizando un Elemento en el DOM @@ -30,11 +30,11 @@ Digamos que hay un `
` en alguna parte de tu archivo HTML:
``` -Nosotros lo llamamos un nodo "raíz" porque todo lo que esté dentro de él será manejado por React DOM. +Lo llamamos un nodo "raíz" porque todo lo que esté dentro de él será manejado por React DOM. -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. +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, podrías tener cuantos nodos raíz en el DOM como quieras. -Para renderizar un elemento de React en el nodo raíz del DOM, ambos se pasan a `ReactDOM.render()`: +Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a `ReactDOM.render()`: `embed:rendering-elements/render-an-element.js` @@ -60,7 +60,7 @@ Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https:/ > >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). > ->Nosotros recomendamos que no te saltes ningún tema porque estos se relacionan entre ellos. +>Recomendamos que no te saltes ningún tema porque estos se relacionan entre ellos. ## React Solo Actualiza lo que es Necesario From 528eb7a83df10aa18444f78197bcea1a8911ae2f Mon Sep 17 00:00:00 2001 From: Simon Hoyos Date: Sat, 2 Feb 2019 18:54:13 -0500 Subject: [PATCH 4/4] Address PR comments --- content/docs/rendering-elements.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index dd586a15a..35ec4aa81 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -32,7 +32,7 @@ Digamos que hay un `
` en alguna parte de tu archivo HTML: Lo llamamos un nodo "raíz" porque todo lo que esté dentro de él será manejado por React DOM. -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, podrías tener cuantos nodos raíz en el DOM como quieras. +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. Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a `ReactDOM.render()`: @@ -44,9 +44,9 @@ Esto muestra "Hello, world" en la página. ## Actualizando el Elemento Renderizado -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. +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. -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()`. +Con nuestro conocimiento hasta este punto, la única manera de actualizar la IU es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`. Considera este ejemplo de un reloj en marcha: @@ -66,10 +66,10 @@ Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https:/ 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. -Esto puedes verificarlo inspeccionando el [último ejemplo](codepen://rendering-elements/update-rendered-element) con las herramientas del navegador: +Puedes verificar esto inspeccionando el [último ejemplo](codepen://rendering-elements/update-rendered-element) con las herramientas del navegador: ![inspector del DOM mostrando actualizaciones diminutas](../images/docs/granular-dom-updates.gif) -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ó. +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ó. -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. +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.