-
Notifications
You must be signed in to change notification settings - Fork 291
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
integrating-with-other-libraries translated to spanish #175
integrating-with-other-libraries translated to spanish #175
Conversation
|
||
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about inconsciente
instead of no es consciente
?
And I suggest
y si los mismos nodos del DOM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also consider leaving the part {#integrating-with-dom-manipulation-plugins}
its used for navigation
https://github.com/reactjs/es.reactjs.org/blob/master/TRANSLATION.md
|
||
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suggest al elemento raíz del DOM
and obtendremos una referencia a este
@@ -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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are refering to the user as tú
instead of usted
.Maybe you can change Tenga
by Ten
|
||
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 `<select>` inputs. | ||
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 `<select>`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think there's an extra jump of line here
|
||
Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us. | ||
Finalmente, queda una cosa más por hacer. En React, los props pueden cambiar con el tiempo. Por ejemplo, el componente `<Chosen>` puede obtener diferentes hijos si el estado del componente padre cambia. Esto significa que en los puntos de integración es importante que actualicemos manualmente el DOM en respuesta a las actualizaciones de los props, ya que no dejamos que React administre el DOM por nosotros. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO las props
instead of los props
could sound better. What do you think?
|
||
## Integrating with Other View Libraries {#integrating-with-other-view-libraries} | ||
## Integración con otras librerias de vista |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suggest keep the capital letters in the titles as the original doc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is common in English, but not quite in Spanish. For consistency, we are using sentence-style capitalization. We could have a further discussion about this when we added to the style guide.
@@ -227,7 +228,7 @@ ReactDOM.render( | |||
); | |||
``` | |||
|
|||
From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `<button>` element: | |||
Desde aquí, puedes comenzar a mover más lógica al componente y comenzar a adoptar prácticas de React más comunes. Por ejemplo, en los componentes es mejor no confiar en las ID porque el mismo componente se puede representar varias veces. En su lugar, usaremos el [sistema de eventos de React](/docs/handling-events.html) y registraremos el controlador de clic directamente en el elemento React `<button>`: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO los ID
sounds better than las ID
|
||
In the example below, we will make a copy of the model's attributes to form the initial state. We subscribe to the `change` event (and unsubscribe on unmounting), and when it happens, we update the state with the model's current attributes. Finally, we make sure that if the `model` prop itself changes, we don't forget to unsubscribe from the old model, and subscribe to the new one. | ||
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider la prop
instead of el prop
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi! Thanks for your contribution. I made some suggestions that I think should be addressed before merging. Feel free to reply to any of them. Also check the following:
- The title is untranslated. Currently in the navbar we have "Integración con otras bibliotecas"
- There is an inconsistent use of "wrapper" and "envoltorio". It would be probably better to use just one of them. If, due to context, you feel the other fits better, state in the text that the are interchangeable.
Also thanks to @EzequielMonforte. He also made some suggestions.
Edit
Apparently, we were making both reviews at the same time, so some suggestions may overlap.
Hey @jvelezpo ! I leave some suggestions Consider refer the reader as |
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Deploy preview for es-reactjs ready! Built with commit d62b865 |
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Deploy preview for es-reactjs ready! Built with commit 4376470 |
Co-Authored-By: jvelezpo <jvelezpo@users.noreply.github.com>
Deploy preview for es-reactjs ready! Built with commit 2c3bb71 |
Deploy preview for es-reactjs ready! Built with commit 8ac64b7 |
@carburo hi! |
Relates to #4