From 19e5f1498fc0a1eb734ba8e455d43d4735d5f094 Mon Sep 17 00:00:00 2001 From: jvelezpo Date: Mon, 18 Feb 2019 18:40:49 -0500 Subject: [PATCH 01/31] integrating-with-other-libraries translated to spanish --- .../docs/integrating-with-other-libraries.md | 127 +++++++++--------- 1 file changed, 64 insertions(+), 63 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 18a67c457..f9d3f5fbb 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -4,23 +4,23 @@ title: Integrating with Other Libraries permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React puede ser utilizado en cualquier aplicación web. Puede integrarse en otras aplicaciones y, con un poco de cuidado, otras aplicaciones pueden integrarse en React. Esta guía examinará algunos de los casos de uso más comunes, centrándose en la integración con [jQuery](https://jquery.com/) y [Backbone](http://backbonejs.org/), pero las mismas ideas pueden ser Aplicadas a la integración de componentes con cualquier código existente. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Integración con los plugins de manipulación de DOM -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +React no es consciente de los cambios realizados en el DOM fuera de React. React determina las actualizaciones basándose en su propia representación interna, y si los mismos nodos DOM son manipulados por otra biblioteca, React se confunde y no tiene forma de recuperarse. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +Esto no significa que sea imposible o incluso necesariamente difícil de combinar React con otras formas de afectar el DOM, solo hay que tener en cuenta lo que está haciendo cada uno. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +La forma más fácil de evitar conflictos es evitar que el componente React se actualice. Puedes hacer esto renderizando elementos que React no tiene motivos para actualizar, como un `
` vacío. -### How to Approach the Problem {#how-to-approach-the-problem} +### Cómo abordar el problema -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Para demostrar esto, Vamos a definir un wrapper para un plugin generico de jQuery. -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +Adjuntaremos un [ref](/docs/refs-and-the-dom.html) al elemento DOM raíz. Dentro de `componentDidMount`, obtendremos una referencia a él para que podamos pasarlo al plugin jQuery. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Para evitar que React toque el DOM después del montaje, devolveremos un `
` vacío desde el método `render()`. El elemento `
` no tiene propiedades ni hijos, por lo que React no tiene ninguna razón para actualizarlo, dejando el plugin jQuery libre para administrar esa parte del DOM: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,21 +39,22 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +Tenga en cuenta que definimos `componentDidMount` y` componentWillUnmount` [métodos del ciclo de vida](/docs/react-component.html#the-component-lifecycle). Muchos plugins de jQuery adjuntan listeners de eventos al DOM, por lo que es importante desmontarlos en `componentWillUnmount`. Si el complemento no proporciona un método para la limpieza, probablemente tendrás que proporcionar el tuyo, recordando eliminar cualquier listener de eventos que el plugin haya registrado para evitar pérdidas de memoria. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Integración con jQuery Chosen Plugin For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. ->**Note:** +>**Nota:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +> Solo porque es posible, no significa que sea el mejor enfoque para las aplicaciones React. Te recomendamos que use los componentes React cuando pueda. Los componentes de React son más fáciles de reutilizar en las aplicaciones de React y, a menudo, brindan más control sobre su comportamiento y apariencia. -First, let's look at what Chosen does to the DOM. +Primero, veamos lo que `Chosen` le hace al DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Si lo llama en un nodo ` `. Luego, se activan los eventos de jQuery para notificarnos sobre los cambios. -Let's say that this is the API we're striving for with our `` wrapper React component: +Digamos que esta es la API que buscamos con nuestro componente `` wrapper de React: ```js function Example() { @@ -67,9 +68,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Lo implementaremos como un [componente no controlado](/docs/uncontrolled-components.html) por simplicidad. -First, we will create an empty component with a `render()` method where we return `` envuelto en un `
`: ```js{4,5} class Chosen extends React.Component { @@ -85,9 +86,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Observe cómo envolvimos `` que le pasamos. Sin embargo, en lo que respecta a React, `
` siempre tiene un solo hijo. Así es como nos aseguramos de que las actualizaciones de React no entren en conflicto con el nodo DOM adicional añadido por `Chosen`. Es importante que si modificas el DOM fuera del flujo de React, debe asegurarse de que React no tenga una razón para tocar esos nodos DOM. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` en `componentDidMount`, y eliminarlo en `componentWillUnmount`: ```js{2,3,7} componentDidMount() { @@ -100,17 +101,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Ten en cuenta que React no asigna ningún significado especial al campo `this.el`. Solo funciona porque previamente hemos asignado este campo desde un `ref` en el método `render()`: ```js ` managed by Chosen. +Esto es suficiente para hacer que nuestro componente se renderice, pero también queremos que se nos notifique acerca de los cambios de valor. Para hacer esto, nos suscribiremos al evento jQuery `change` en el ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +La documentación de `Chosen` sugiere que podemos usar la API jQuery `trigger()` para notificarle sobre los cambios en el elemento DOM original. Dejaremos que React se encargue de actualizar `this.props.children` dentro de `` children managed by React change. +De esta manera, `Chosen` sabrá que actualizará su elemento DOM cuando cambien los hijos de `` en un `
` extra. Esto es necesario porque `Chosen` agregará otro elemento DOM justo después del nodo `` en un `
` extra. Esto es necesario porque `Chosen` agregará otro elemento DOM justo después del nodo `` en `componentDidMount`, y eliminarlo en `componentWillUnmount`: From ae16cd7b5a71079383e16dd041884a34ec5d82cb Mon Sep 17 00:00:00 2001 From: Ezequiel Monforte Date: Wed, 20 Feb 2019 09:21:58 -0500 Subject: [PATCH 06/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index ae9f98631..92756ebf1 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -193,7 +193,7 @@ class Chosen extends React.Component { React puede integrarse en otras aplicaciones gracias a la flexibilidad de [`ReactDOM.render()`](/docs/react-dom.html#render). -Aunque React se usa comúnmente en el inicio para cargar un solo componente React raíz en el DOM, `ReactDOM.render()` también se puede llamar varias veces para partes independientes de la interfaz de usuario que pueden ser tan pequeñas como un botón, o tan grandes como Una aplicación. +Aunque React se usa comúnmente en el inicio para cargar un solo componente React raíz en el DOM, `ReactDOM.render()` también se puede llamar varias veces para partes independientes de la interfaz de usuario que pueden ser tan pequeñas como un botón, o tan grandes como una aplicación. De hecho, asi es exactamente cómo se utiliza React en Facebook. Esto nos permite escribir aplicaciones en React pieza por pieza y combinarlas con nuestras plantillas existentes generadas por el servidor y otros códigos del lado del cliente. From f4f65da70cfd12e2efe2aa7868a56c762168ac5e Mon Sep 17 00:00:00 2001 From: Ezequiel Monforte Date: Wed, 20 Feb 2019 09:22:13 -0500 Subject: [PATCH 07/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 92756ebf1..04ff75cc4 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -250,7 +250,7 @@ ReactDOM.render( [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010) -Puedes tener tantos componentes aislados como desee y usar `ReactDOM.render()` para renderizarlos a diferentes contenedores DOM. Gradualmente, a medida que conviertas más de tu aplicación a React, podráx combinarlos en componentes más grandes y mover algunos de los `ReactDOM.render()` mas arriba en la jerarquía. +Puedes tener tantos componentes aislados como desees y usar `ReactDOM.render()` para renderizarlos a diferentes contenedores DOM. Gradualmente, a medida que conviertas más de tu aplicación a React, podrás combinarlos en componentes más grandes y mover algunos de los `ReactDOM.render()` mas arriba en la jerarquía. ### Incrustación de React en una vista de Backbone From 460cc86a6871cb1d01e3ea58f52049dad3b76405 Mon Sep 17 00:00:00 2001 From: Ezequiel Monforte Date: Wed, 20 Feb 2019 09:22:31 -0500 Subject: [PATCH 08/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 04ff75cc4..d4efdf368 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -286,7 +286,7 @@ Cuando se elimina un componente *desde dentro de* un árbol de React, la limpiez Aunque generalmente se recomienda usar un flujo de datos unidireccional como [el estado de React](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), o [Redux](http://redux.js.org/), los componentes React pueden usar una capa modelo de otros frameworks. -### Usando modelos de Backbone en React Components +### Usando Modelos de Backbone en Componentes de React {#using-backbone-models-in-react-components} La forma más sencilla de consumir modelos y colecciones [Backbone](http://backbonejs.org/) de un componente React es escuchar los diversos eventos de cambio y forzar manualmente una actualización. From c290b7fdd393a04a09594dca493b17769a4f335e Mon Sep 17 00:00:00 2001 From: Ezequiel Monforte Date: Wed, 20 Feb 2019 09:22:43 -0500 Subject: [PATCH 09/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index d4efdf368..efa8d416f 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -290,7 +290,7 @@ Aunque generalmente se recomienda usar un flujo de datos unidireccional como [el La forma más sencilla de consumir modelos y colecciones [Backbone](http://backbonejs.org/) de un componente React es escuchar los diversos eventos de cambio y forzar manualmente una actualización. -Los componentes responsables de de renderizar modelos escucharán los eventos `'change'`, mientras que los componentes responsables de renderizar las colecciónes escucharán los eventos de `'add'` y `'remove'`. En ambos casos, llama a [`this.forceUpdate()`](/docs/react-component.html#forceupdate) para volver renderizar el componente con los nuevos datos. +Los componentes responsables de renderizar modelos escucharán los eventos `'change'`, mientras que los componentes responsables de renderizar las colecciónes escucharán los eventos de `'add'` y `'remove'`. En ambos casos, llama a [`this.forceUpdate()`](/docs/react-component.html#forceupdate) para volver renderizar el componente con los nuevos datos. En el ejemplo a continuación, el componente `List` renderiza una colección Backbone, utilizando el componente `Item` para renderizar elementos individuales. From a43d4ee495088c1e50c574701db344fd33f922e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:22:54 -0500 Subject: [PATCH 10/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index efa8d416f..d63d35fef 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -6,7 +6,7 @@ permalink: docs/integrating-with-other-libraries.html React puede ser utilizado en cualquier aplicación web. Puede integrarse en otras aplicaciones y, con un poco de cuidado, otras aplicaciones pueden integrarse en React. Esta guía examinará algunos de los casos de uso más comunes, centrándose en la integración con [jQuery](https://jquery.com/) y [Backbone](http://backbonejs.org/), pero las mismas ideas pueden ser aplicadas a la integración de componentes con cualquier código existente. -## Integración con los plugins de manipulación de DOM +## Integración con los plugins de manipulación del DOM {#integrating-with-dom-manipulation-plugins} React no es consciente de los cambios realizados en el DOM fuera de React. React determina las actualizaciones basándose en su propia representación interna, y si los mismos nodos DOM son manipulados por otra biblioteca, React se confunde y no tiene forma de recuperarse. From d44c293dd6e34ac2f78f4589b345105a6cce1983 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:23:02 -0500 Subject: [PATCH 11/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index d63d35fef..7d2f1a289 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -252,7 +252,7 @@ ReactDOM.render( Puedes tener tantos componentes aislados como desees y usar `ReactDOM.render()` para renderizarlos a diferentes contenedores DOM. Gradualmente, a medida que conviertas más de tu aplicación a React, podrás combinarlos en componentes más grandes y mover algunos de los `ReactDOM.render()` mas arriba en la jerarquía. -### Incrustación de React en una vista de Backbone +### Incrustación de React en una vista de Backbone {#embedding-react-in-a-backbone-view} Las vistas de [Backbone](http://backbonejs.org/) suelen utilizar cadenas HTML, o funciones plantillas que producen cadenas, para crear el contenido de sus elementos DOM. Este proceso, también, puede reemplazarse con la representación de un componente React. From 23fbd433b8387b9e8389e826d6995f99561c084b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:23:15 -0500 Subject: [PATCH 12/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 7d2f1a289..78111d38f 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -400,7 +400,7 @@ function connectToBackboneModel(WrappedComponent) { } ``` -Para demostrar cómo usarlo, conectaremos un componente `NameInput` React a un modelo de Backbone, y actualizaremos su atributo `firstName` cada vez que cambie la entrada: +Para demostrar cómo usarlo, conectaremos un componente React `NameInput` a un modelo de Backbone, y actualizaremos su atributo `firstName` cada vez que cambie la entrada: ```js{4,6,11,15,19-21} function NameInput(props) { From 051c980726b02e64fef8968ba65e32952c9b08a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:23:29 -0500 Subject: [PATCH 13/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 78111d38f..2f279e641 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -350,7 +350,7 @@ class List extends React.Component { [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/GmrREm?editors=0010) -### Extracción de datos de modelos Backbone +### Extracción de datos de modelos Backbone {#extracting-data-from-backbone-models} El enfoque anterior requiere que sus componentes React estén al tanto de los modelos y colecciones de Backbone. Si luego planeas migrar a otra solución de administración de datos, es posible que desees concentrar el conocimiento sobre Backbone en la menor cantidad posible de partes del código. From fc1fe6d0d788e06bccd2c93ca0e9395c997f1976 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:23:51 -0500 Subject: [PATCH 14/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 2f279e641..21c8b7cde 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -14,7 +14,7 @@ Esto no significa que sea imposible o incluso necesariamente difícil de combina La forma más fácil de evitar conflictos es evitar que el componente React se actualice. Puedes hacer esto renderizando elementos que React no tiene motivos para actualizar, como un `
` vacío. -### Cómo abordar el problema +### Cómo abordar el problema {#how-to-approach-the-problem} Para demostrar esto, vamos a definir un wrapper para un plugin genérico de jQuery. From 44293b71277b279975b3fbc3907eb72fd491cd17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:24:06 -0500 Subject: [PATCH 15/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 21c8b7cde..197329b4b 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -39,7 +39,7 @@ class SomePlugin extends React.Component { } ``` -Tenga en cuenta que definimos `componentDidMount` y` componentWillUnmount` [métodos del ciclo de vida](/docs/react-component.html#the-component-lifecycle). Muchos plugins de jQuery adjuntan listeners de eventos al DOM, por lo que es importante desmontarlos en `componentWillUnmount`. Si el complemento no proporciona un método para la limpieza, probablemente tendrás que proporcionar el tuyo, recordando eliminar cualquier listener de eventos que el plugin haya registrado para evitar pérdidas de memoria. +Ten en cuenta que definimos los [métodos del ciclo de vida](/docs/react-component.html#the-component-lifecycle) `componentDidMount` y` componentWillUnmount`. Muchos plugins de jQuery adjuntan listeners de eventos al DOM, por lo que es importante desmontarlos en `componentWillUnmount`. Si el complemento no proporciona un método para la limpieza, probablemente tendrás que proporcionar el tuyo, recordando eliminar cualquier listener de eventos que el plugin haya registrado para evitar pérdidas de memoria. ### Integración con jQuery Chosen Plugin From 9d89f0f5aaa952601c8226828dcb57936e454b0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:24:15 -0500 Subject: [PATCH 16/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 197329b4b..99ffb675c 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -41,7 +41,7 @@ class SomePlugin extends React.Component { Ten en cuenta que definimos los [métodos del ciclo de vida](/docs/react-component.html#the-component-lifecycle) `componentDidMount` y` componentWillUnmount`. Muchos plugins de jQuery adjuntan listeners de eventos al DOM, por lo que es importante desmontarlos en `componentWillUnmount`. Si el complemento no proporciona un método para la limpieza, probablemente tendrás que proporcionar el tuyo, recordando eliminar cualquier listener de eventos que el plugin haya registrado para evitar pérdidas de memoria. -### Integración con jQuery Chosen Plugin +### Integración con el plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. From b28344fba18e705c6ba115ee12a5475c5c33939d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:24:27 -0500 Subject: [PATCH 17/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 99ffb675c..fc98fe3bd 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -43,7 +43,6 @@ Ten en cuenta que definimos los [métodos del ciclo de vida](/docs/react-compone ### Integración con el plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. >**Nota:** From 62bab7947ba67bfbcc47d78965832016205fc0a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:24:35 -0500 Subject: [PATCH 18/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index fc98fe3bd..cc2dbc612 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -287,7 +287,7 @@ Aunque generalmente se recomienda usar un flujo de datos unidireccional como [el ### Usando Modelos de Backbone en Componentes de React {#using-backbone-models-in-react-components} -La forma más sencilla de consumir modelos y colecciones [Backbone](http://backbonejs.org/) de un componente React es escuchar los diversos eventos de cambio y forzar manualmente una actualización. +La forma más sencilla de consumir modelos y colecciones [Backbone](http://backbonejs.org/) desde un componente React es escuchar los diversos eventos de cambio y forzar manualmente una actualización. Los componentes responsables de renderizar modelos escucharán los eventos `'change'`, mientras que los componentes responsables de renderizar las colecciónes escucharán los eventos de `'add'` y `'remove'`. En ambos casos, llama a [`this.forceUpdate()`](/docs/react-component.html#forceupdate) para volver renderizar el componente con los nuevos datos. From 437647091a2a6573d6f103b02dbb4d20a43678fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:24:49 -0500 Subject: [PATCH 19/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index cc2dbc612..4cf28099a 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -43,7 +43,7 @@ Ten en cuenta que definimos los [métodos del ciclo de vida](/docs/react-compone ### Integración con el plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} -Para un ejemplo más concreto de estos conceptos, escribamos un wrapper mínimo para el plugin [Elegido](https://harvesthq.github.io/chosen/), que aumenta las entradas ``. >**Nota:** > From 554f6610ff2b548feb8c8ec3e87bab67694a161b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:25:05 -0500 Subject: [PATCH 20/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 4cf28099a..d8425c809 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -51,7 +51,7 @@ Para un ejemplo más concreto de estos conceptos, escribamos un wrapper mínimo Primero, veamos lo que `Chosen` le hace al DOM. -Si lo llama en un nodo ` `. Luego, se activan los eventos de jQuery para notificarnos sobre los cambios. +Si lo llama en un nodo DOM ` `. Luego, se activan los eventos de jQuery para notificarnos sobre los cambios. Digamos que esta es la API que buscamos con nuestro componente `` wrapper de React: From 539299f82bb1e4bcdb5c819decfb9de837af52e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:25:47 -0500 Subject: [PATCH 21/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index d8425c809..18a85091d 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -359,7 +359,7 @@ De esta manera, solo el componente de orden superior necesita conocer los aspect En el siguiente ejemplo, haremos una copia de los atributos del modelo para formar el estado inicial. Nos suscribimos al evento `change` (y cancelamos la suscripción al desmontar), y cuando sucede, actualizamos el estado con los atributos actuales del modelo. Finalmente, nos aseguramos de que si el prop `model` cambia, no nos olvidemos de cancelar la suscripción del modelo anterior y suscribirnos al nuevo. -Ten en cuenta que este ejemplo no pretende ser exhaustivo con respecto al trabajo con Backbone, pero debería darle una idea de cómo abordar esto de una manera genérica: +Ten en cuenta que este ejemplo no pretende ser exhaustivo con respecto al trabajo con Backbone, pero debería darte una idea de cómo abordar esto de una manera genérica: ```js{1,5,10,14,16,17,22,26,32} function connectToBackboneModel(WrappedComponent) { From 4c73b4bb61ccc12cbd00bba2fe8a507a476947c8 Mon Sep 17 00:00:00 2001 From: Ezequiel Monforte Date: Wed, 20 Feb 2019 09:26:47 -0500 Subject: [PATCH 22/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 18a85091d..ad809ccee 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -200,7 +200,7 @@ De hecho, asi es exactamente cómo se utiliza React en Facebook. Esto nos permit Un patrón común en las aplicaciones web más antiguas es describir los fragmentos del DOM como una cadena e insertarlo en el DOM de la siguiente manera: `$el.html(htmlString)`. Estos puntos en un código base son perfectos para introducir React. Solo reescribe el renderizado basado en cadena como un componente React. -Así que la siguiente implementación de jQuery ... +Así que la siguiente implementación de jQuery... ```js $('#container').html(''); From 7c8d346e103495ad3e796bc44d7434dd07d27153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:27:25 -0500 Subject: [PATCH 23/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index ad809ccee..1b69f6144 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -53,7 +53,7 @@ Primero, veamos lo que `Chosen` le hace al DOM. Si lo llama en un nodo DOM ` `. Luego, se activan los eventos de jQuery para notificarnos sobre los cambios. -Digamos que esta es la API que buscamos con nuestro componente `` wrapper de React: +Digamos que esta es la API que buscamos con nuestro componente wrapper ``: ```js function Example() { From 71e0bd63d9203eba11bc475717a7bab9fc144994 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:28:19 -0500 Subject: [PATCH 24/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 1b69f6144..3ea1da33c 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -436,4 +436,4 @@ ReactDOM.render( [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010) -Esta técnica no se limita a Backbone. Puede usar React con cualquier biblioteca de modelos suscribiéndose a sus cambios en los métodos del ciclo de vida y, opcionalmente, copiando los datos al estado local de React. +Esta técnica no se limita a Backbone. Puedes usar React con cualquier biblioteca de modelos suscribiéndote a sus cambios en los métodos del ciclo de vida y, opcionalmente, copiando los datos al estado local de React. From f7b69bc5032a91764c74095dbafaa44e7f51bac5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:28:36 -0500 Subject: [PATCH 25/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 3ea1da33c..3384952a8 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -188,7 +188,7 @@ class Chosen extends React.Component { [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/xdgKOz?editors=0010) -## Integración con otras librerias de vista +## Integración con otras bibliotecas de vista {#integrating-with-other-view-libraries} React puede integrarse en otras aplicaciones gracias a la flexibilidad de [`ReactDOM.render()`](/docs/react-dom.html#render). From 9a8ab87fc73ae2a5ba19393ab1216946263005e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:29:01 -0500 Subject: [PATCH 26/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 3384952a8..0811d6c5b 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -194,7 +194,7 @@ React puede integrarse en otras aplicaciones gracias a la flexibilidad de [`Reac Aunque React se usa comúnmente en el inicio para cargar un solo componente React raíz en el DOM, `ReactDOM.render()` también se puede llamar varias veces para partes independientes de la interfaz de usuario que pueden ser tan pequeñas como un botón, o tan grandes como una aplicación. -De hecho, asi es exactamente cómo se utiliza React en Facebook. Esto nos permite escribir aplicaciones en React pieza por pieza y combinarlas con nuestras plantillas existentes generadas por el servidor y otros códigos del lado del cliente. +De hecho, así es exactamente cómo se utiliza React en Facebook. Esto nos permite escribir aplicaciones en React pieza por pieza y combinarlas con nuestras plantillas existentes generadas por el servidor y otros códigos del lado del cliente. ### Reemplazando el renderizado basado en strings con React From 2c3bb714671b32b33646463385f28eecc53b340e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:29:19 -0500 Subject: [PATCH 27/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 0811d6c5b..03b90b7a6 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -196,7 +196,7 @@ Aunque React se usa comúnmente en el inicio para cargar un solo componente Reac De hecho, así es exactamente cómo se utiliza React en Facebook. Esto nos permite escribir aplicaciones en React pieza por pieza y combinarlas con nuestras plantillas existentes generadas por el servidor y otros códigos del lado del cliente. -### Reemplazando el renderizado basado en strings con React +### Reemplazando el renderizado basado en strings con React {#replacing-string-based-rendering-with-react} Un patrón común en las aplicaciones web más antiguas es describir los fragmentos del DOM como una cadena e insertarlo en el DOM de la siguiente manera: `$el.html(htmlString)`. Estos puntos en un código base son perfectos para introducir React. Solo reescribe el renderizado basado en cadena como un componente React. From 87745fa6a9352c3f366f4a178556f329ec01fa5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Wed, 20 Feb 2019 09:29:47 -0500 Subject: [PATCH 28/31] Update content/docs/integrating-with-other-libraries.md Co-Authored-By: jvelezpo --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 03b90b7a6..81f0e63f7 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -281,7 +281,7 @@ Es importante que también llamemos a `ReactDOM.unmountComponentAtNode()` en el Cuando se elimina un componente *desde dentro de* un árbol de React, la limpieza se realiza automáticamente, pero como estamos eliminando todo el árbol a mano, debemos llamar a este método. -## Integración con capas de modelo +## Integración con capas de modelo {#integrating-with-model-layers} Aunque generalmente se recomienda usar un flujo de datos unidireccional como [el estado de React](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), o [Redux](http://redux.js.org/), los componentes React pueden usar una capa modelo de otros frameworks. From acf02ac4166b26d7dcdc3e91dc5446f4cabfe1e0 Mon Sep 17 00:00:00 2001 From: jvelezpo Date: Thu, 21 Feb 2019 08:35:47 -0500 Subject: [PATCH 29/31] Fixing PR comments --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 81f0e63f7..594f549f7 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -8,7 +8,7 @@ React puede ser utilizado en cualquier aplicación web. Puede integrarse en otra ## Integración con los plugins de manipulación del DOM {#integrating-with-dom-manipulation-plugins} -React no es consciente de los cambios realizados en el DOM fuera de React. React determina las actualizaciones basándose en su propia representación interna, y si los mismos nodos DOM son manipulados por otra biblioteca, React se confunde y no tiene forma de recuperarse. +React es inconsciente de los cambios realizados en el DOM fuera de React. React determina las actualizaciones basándose en su propia representación interna, y si los mismos nodos DOM son manipulados por otra biblioteca, React se confunde y no tiene forma de recuperarse. Esto no significa que sea imposible o incluso necesariamente difícil de combinar React con otras formas de afectar el DOM, solo hay que tener en cuenta lo que está haciendo cada uno. From 2758f0ce15e24a880089a3fa00311bc4874f9ae9 Mon Sep 17 00:00:00 2001 From: jvelezpo Date: Thu, 21 Feb 2019 08:37:37 -0500 Subject: [PATCH 30/31] translate the title to match the nav --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 594f549f7..01f45cafe 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,6 +1,6 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Integración con otras bibliotecas permalink: docs/integrating-with-other-libraries.html --- From 8ac64b75ae8dc0e6163fc7a2eb8e43fa1d956348 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Thu, 21 Feb 2019 21:17:54 -0500 Subject: [PATCH 31/31] Update integrating-with-other-libraries.md --- content/docs/integrating-with-other-libraries.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 01f45cafe..f0e1f6137 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -85,7 +85,7 @@ class Chosen extends React.Component { } ``` -Observe cómo envolvimos `` que le pasamos. Sin embargo, en lo que respecta a React, `
` siempre tiene un solo hijo. Así es como nos aseguramos de que las actualizaciones de React no entren en conflicto con el nodo DOM adicional añadido por `Chosen`. Es importante que si modificas el DOM fuera del flujo de React, debes asegurarte de que React no tenga una razón para tocar esos nodos DOM. +Observa cómo envolvimos `` que le pasamos. Sin embargo, en lo que respecta a React, `
` siempre tiene un solo hijo. Así es como nos aseguramos de que las actualizaciones de React no entren en conflicto con el nodo DOM adicional añadido por `Chosen`. Es importante que si modificas el DOM fuera del flujo de React, debes asegurarte de que React no tenga una razón para tocar esos nodos DOM. A continuación, implementaremos los métodos del ciclo de vida. Necesitamos inicializar `Chosen` con la referencia al nodo `