-
Notifications
You must be signed in to change notification settings - Fork 303
Rendering Elements translation #9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
alejandronanez
merged 4 commits into
reactjs:master
from
simonhoyos:rendering-elements-translation
Feb 3, 2019
Merged
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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. | ||
| 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 = <h1>Hello, world</h1>; | ||
| const element = <h1>Hola, mundo</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. | ||
| 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. | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
|
|
||
| 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. | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
|
|
||
| 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()`: | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
|
|
||
| `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. | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
|
|
||
| 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: | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
|
|
||
|  | ||
|  | ||
|
|
||
| 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. | ||
|
alejandronanez marked this conversation as resolved.
Outdated
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.