Translate: handling events docs #77

simonhoyos · 2019-02-05T01:29:16Z

Description:

Translation of handling events page in docs

This PR is related to issue #15

EzequielMonforte · 2019-02-05T01:51:50Z

content/docs/handling-events.md

 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
 redirect_from:
  - "docs/events-ko-KR.html"
 ---

-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
+Manejar eventos con elementos de React es muy similar a la manera en cómo se manejan eventos con elementos del DOM. Solo hay una diferencias de sintaxis:


I suggest ...es muy similar a manejar eventos con elementos del Dom.

EzequielMonforte · 2019-02-05T01:59:50Z

content/docs/handling-events.md


 ```js{1}
 <button onClick={activateLasers}>
  Activate Lasers
 </button>
 ```

-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
+Otra diferencia es que en React no puedes retornar `false` para prevenir el comportamiento por defecto. Debes, explícitamente, llamar `preventDefault`. Por ejemplo, en un HTML plano, para prevenir el comportamiento por defecto de un hipervínculo de abrir una nueva página, puedes escribir:


What about enlace for link or just link

EzequielMonforte · 2019-02-05T02:01:07Z

content/docs/handling-events.md

@@ -54,19 +54,19 @@ function ActionLink() {
 }
 ```

-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entoncés no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.


Suggested change

Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entoncés no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.

Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entonces no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.

alejandronanez

Hey @shmesa22, this is getting close!

Please, consider the updates suggested by @EzequielMonforte and the one I left!

Thanks for your contribution 🎉 !

alejandronanez · 2019-02-06T02:09:11Z

content/docs/handling-events.md


-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
+Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":


Let's reference the Spanish MDN docs :)

Suggested change

Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":

Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":

tesseralis · 2019-02-09T21:51:32Z

@shmesa22 I synced your PR to add changes from master.

simonhoyos · 2019-02-10T10:02:07Z

Thank you @tesseralis, and sorry about this PR. I have been very busy lately, I will probably resolve PR comments tomorrow

…reactjs.org into handling-events-translation

tesseralis · 2019-02-13T05:43:09Z

@alejandronanez @EzequielMonforte I think this is ready for another review?

EzequielMonforte · 2019-02-13T05:57:57Z

content/docs/handling-events.md

 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
 redirect_from:
  - "docs/events-ko-KR.html"
 ---

-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
+Manejar eventos con elementos de React es muy similar a manejar eventos con elementos del Dom.. Solo hay una diferencias de sintaxis:


I suggest

Suggested change

Manejar eventos con elementos de React es muy similar a manejar eventos con elementos del Dom.. Solo hay una diferencias de sintaxis:

Manejar eventos con elementos de React es muy similar a manejar eventos en elementos del DOM. Hay algunas diferencias de sintaxis:

EzequielMonforte · 2019-02-13T06:01:57Z

content/docs/handling-events.md

-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* Los eventos de React se nombran usando camelCase, en vez de minúsculas.
+* En JSX se pasa la función como el manejador del evento, en vez de una cadena de texto.


Could be:

Suggested change

* En JSX se pasa la función como el manejador del evento, en vez de una cadena de texto.

* Con JSX pasas una función como el manejador del evento, en vez de un string.

Here are some words that you should consider to not translate, as string: https://github.com/reactjs/es.reactjs.org/blob/master/TRANSLATION.md

EzequielMonforte · 2019-02-13T06:05:01Z

content/docs/handling-events.md

@@ -54,19 +54,19 @@ function ActionLink() {
 }
 ```

-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entonces no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.


What do you think about deberías instead of debes

I think deberías sounds like some times you won't need to worry, but in some cases you will. In that case it would be ... you shouldn't need to worry.... LMK what do you think about this one

EzequielMonforte · 2019-02-13T06:09:39Z

content/docs/handling-events.md


-When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
+Cuando estás utilizando React, generalmente, no debes llamar `addEventListener` para agregar manejadores de eventos a un elemento del DOM después de que este es creado. Por el contrario, solo debes proveer un manejador de eventos cuando el elemento es inicialmente renderizado.


I think listeners aren't the same of handlers, so IMO you could change escuchadores or receptores instead of manejadores

EzequielMonforte · 2019-02-13T06:12:30Z

content/docs/handling-events.md


-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
+Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":


IMO encendido sounds better than prendido. What do you think?

Suggested change

Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":

Cuando defines un componente usando una [clase de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "ENCENDIDO" y "APAGADO":

EzequielMonforte · 2019-02-13T06:15:16Z

content/docs/handling-events.md


 ```js{6,7,10-14,18}
 class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

-    // This binding is necessary to make `this` work in the callback
+    // Esta ligadura es necesaria para hacer que `this` funcione en el callback


What do you think about vínculo or enlace instead of ligadura?

EzequielMonforte · 2019-02-13T06:20:29Z

content/docs/handling-events.md


-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
+Esto no es un comportamiento especifico de React; esto hace parte de [como funcionan las funciones JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generalmente, si refieres un método sin usar `()` después de este, tal como `onClick={this.handleClick}`, deberías ligar ese método.


Maybe you could change como funcionan las funciones by como operan las funciones to not be repetitve.

Also IMO sounds better

esto es parte de

than

esto hace parte de

Don't know about esto es parte de. I'm open to hearing opinions

EzequielMonforte · 2019-02-13T06:22:23Z

content/docs/handling-events.md

-
-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+Esta sintaxis está habilitada por defecto en [Create React App](https://github.com/facebookincubator/create-react-app).
+:


Suggested change

:

EzequielMonforte · 2019-02-13T06:23:20Z

content/docs/handling-events.md

-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+Esta sintaxis está habilitada por defecto en [Create React App](https://github.com/facebookincubator/create-react-app).
+:
+Si no estas usando la sintaxis de campos publicos de clases, puedes usar [funciones flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback:


Suggested change

Si no estas usando la sintaxis de campos publicos de clases, puedes usar [funciones flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback:

Si no estas usando la sintaxis de campos publicos de clases, puedes usar una [función flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback:

EzequielMonforte · 2019-02-13T06:26:09Z

content/docs/handling-events.md

@@ -138,17 +138,17 @@ class LoggingButton extends React.Component {
 }
 ```

-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
+El problema con esta sintaxis es que un callback diferente es creado cada vez que `LogginButton` es renderizado. En la mayoría de los casos, esto está bien. Sin embargo, si este callback se pasa como una propiedad a componentes más bajos, estos componentes podría renderizarse nuevamente. Nosotros, generalmente, recomendamos ligar en el constructor o usar la sintaxis de campos de clases, para evitar esta clase de problemas de rendimiento.


Suggested change

El problema con esta sintaxis es que un callback diferente es creado cada vez que `LogginButton` es renderizado. En la mayoría de los casos, esto está bien. Sin embargo, si este callback se pasa como una propiedad a componentes más bajos, estos componentes podría renderizarse nuevamente. Nosotros, generalmente, recomendamos ligar en el constructor o usar la sintaxis de campos de clases, para evitar esta clase de problemas de rendimiento.

El problema con esta sintaxis es que un callback diferente es creado cada vez que `LogginButton` es renderizado. En la mayoría de los casos, esto está bien. Sin embargo, si este callback se pasa como una propiedad a componentes más bajos, estos componentes podrían renderizarse nuevamente. Generalmente, recomendamos ligar en el constructor o usar la sintaxis de campos de clases, para evitar esta clase de problemas de rendimiento.

EzequielMonforte · 2019-02-13T06:26:53Z

content/docs/handling-events.md


-## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
+## Pasando Argumentos a un Manejador de Eventos {#passing-arguments-to-event-handlers}


I suggest

Suggested change

## Pasando Argumentos a un Manejador de Eventos {#passing-arguments-to-event-handlers}

## Pasando Argumentos a Manejadores de Eventos {#passing-arguments-to-event-handlers}

EzequielMonforte · 2019-02-13T06:27:57Z

content/docs/handling-events.md


-Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
+Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si `id` es el ID de una fila, cualquiera de los códigos a continuación podría funcionar:


I suggest

Suggested change

Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si `id` es el ID de una fila, cualquiera de los códigos a continuación podría funcionar:

Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si `id` es el ID de una fila, cualquiera de los códigos siguientes podría funcionar:

IMHO, a continuación sounds better.

Maybe cualquiera de los siguientes códigos...

Hearing opinions.

alejandronanez · 2019-02-14T13:17:14Z

Hey @shmesa22 👋 , what's the state of this PR?

Thanks!

simonhoyos · 2019-02-14T14:20:05Z

Hey @alejandronanez. Almost done with last comments.

I'll be pushing changes tonight.

…ing-events-translation

simonhoyos · 2019-02-15T02:27:51Z

@EzequielMonforte I left some comments in two of your reviews. LMK what do you think 👍

alejandronanez

Hey @shmesa22, this is looking pretty solid!

LGTM - merging!

Translate: handling events docs

29c2522

EzequielMonforte reviewed Feb 5, 2019

View reviewed changes

tesseralis mentioned this pull request Feb 5, 2019

[OLD] Legacy Spanish Translation Progress #4

Closed

alejandronanez requested changes Feb 6, 2019

View reviewed changes

Merge branch 'master' into handling-events-translation

a9a902e

jpvg10 mentioned this pull request Feb 11, 2019

Translating Invalid hook call warning #141

Merged

simonhoyos added 2 commits February 11, 2019 20:37

Address PR comments

5629f93

Merge branch 'handling-events-translation' of github.com:shmesa22/es.…

0a43a36

…reactjs.org into handling-events-translation

EzequielMonforte reviewed Feb 13, 2019

View reviewed changes

alejandronanez added changes-requested has-reviewer labels Feb 14, 2019

Merge branch 'master' of github.com:reactjs/es.reactjs.org into handl…

c62b052

…ing-events-translation

Address PR comments

4b25b1d

Update handling-events.md

604ea1c

alejandronanez approved these changes Feb 15, 2019

View reviewed changes

alejandronanez merged commit 7c25a2d into reactjs:master Feb 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate: handling events docs #77

Translate: handling events docs #77

simonhoyos commented Feb 5, 2019

EzequielMonforte Feb 5, 2019

EzequielMonforte Feb 5, 2019

EzequielMonforte Feb 5, 2019

alejandronanez left a comment

alejandronanez Feb 6, 2019

tesseralis commented Feb 9, 2019

simonhoyos commented Feb 10, 2019

tesseralis commented Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

simonhoyos Feb 14, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

simonhoyos Feb 14, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

EzequielMonforte Feb 13, 2019

simonhoyos Feb 14, 2019

alejandronanez commented Feb 14, 2019

simonhoyos commented Feb 14, 2019

simonhoyos commented Feb 15, 2019

alejandronanez left a comment

	Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entoncés no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.
	Aquí, `e` es un evento sintético. React define estos eventos sintéticos acorde a las [especificaciones W3C](https://www.w3.org/TR/DOM-Level-3-Events/), entonces no debes preocuparte por la compatibilidad a tráves de los navegadores. Mira la guía de referencia [`SyntheticEvent`](/docs/events.html) para aprender más.


		When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
		Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":

	Manejar eventos con elementos de React es muy similar a manejar eventos con elementos del Dom.. Solo hay una diferencias de sintaxis:
	Manejar eventos con elementos de React es muy similar a manejar eventos en elementos del DOM. Hay algunas diferencias de sintaxis:

	* En JSX se pasa la función como el manejador del evento, en vez de una cadena de texto.
	* Con JSX pasas una función como el manejador del evento, en vez de un string.


		When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
		Cuando estás utilizando React, generalmente, no debes llamar `addEventListener` para agregar manejadores de eventos a un elemento del DOM después de que este es creado. Por el contrario, solo debes proveer un manejador de eventos cuando el elemento es inicialmente renderizado.

	Cuando defines un componente usando [clases de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "PRENDIDO" y "APAGADO":
	Cuando defines un componente usando una [clase de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes), un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente `Toggle` renderiza un botón que permite al usuario cambiar el estado entre "ENCENDIDO" y "APAGADO":


		This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
		Esto no es un comportamiento especifico de React; esto hace parte de [como funcionan las funciones JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generalmente, si refieres un método sin usar `()` después de este, tal como `onClick={this.handleClick}`, deberías ligar ese método.

	Si no estas usando la sintaxis de campos publicos de clases, puedes usar [funciones flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback:
	Si no estas usando la sintaxis de campos publicos de clases, puedes usar una [función flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback:


		## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
		## Pasando Argumentos a un Manejador de Eventos {#passing-arguments-to-event-handlers}

	## Pasando Argumentos a un Manejador de Eventos {#passing-arguments-to-event-handlers}
	## Pasando Argumentos a Manejadores de Eventos {#passing-arguments-to-event-handlers}


		Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
		Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si `id` es el ID de una fila, cualquiera de los códigos a continuación podría funcionar:

Translate: handling events docs #77

Translate: handling events docs #77

Conversation

simonhoyos commented Feb 5, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alejandronanez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tesseralis commented Feb 9, 2019

simonhoyos commented Feb 10, 2019

tesseralis commented Feb 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alejandronanez commented Feb 14, 2019

simonhoyos commented Feb 14, 2019

simonhoyos commented Feb 15, 2019

alejandronanez left a comment

Choose a reason for hiding this comment