From a63e5623fb91549dc16fbf317abd35200ae941bc Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Thu, 7 Feb 2019 21:05:22 -0600 Subject: [PATCH 1/7] Translate of Declarative --- content/home/marketing/declarative.md | 7 +++---- src/pages/index.js | 8 ++++---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md index c3b651902..e18e2246d 100644 --- a/content/home/marketing/declarative.md +++ b/content/home/marketing/declarative.md @@ -1,8 +1,7 @@ --- -title: Declarative +title: Declarativo order: 0 --- +React hace que crear interfaces de usuario interactivas sea sencillo. Diseña vistas simples para cada estado en tu aplicación, y React actualizará y renderizara de manera eficiente los componentes correctos cuando sus datos cambien. -React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. - -Declarative views make your code more predictable and easier to debug. +Las vistas declarativas hacen que tu código sea más predecible y más fácil de depurar. diff --git a/src/pages/index.js b/src/pages/index.js index bc2d732fd..d186065b9 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -134,7 +134,7 @@ class Home extends Component { fontSize: 30, }, }}> - A JavaScript library for building user interfaces + Una librería de JavaScript para construir interfaces de usuario

- Get Started + Comienza - Take the Tutorial + Haz el tutorial @@ -291,7 +291,7 @@ class Home extends Component { - Take the Tutorial + Haz el tutorial From 20d5e9de3a11ff26fd153d7a9b7e92d3f58b3fff Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Thu, 7 Feb 2019 21:24:38 -0600 Subject: [PATCH 2/7] Translate Component-Based --- content/home/marketing/component-based.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md index aeb3c4de2..4727eda95 100644 --- a/content/home/marketing/component-based.md +++ b/content/home/marketing/component-based.md @@ -1,8 +1,11 @@ --- -title: Component-Based +title: Basado en componentes order: 1 --- -Build encapsulated components that manage their own state, then compose them to make complex UIs. +Cree componentes encapsulados que manejen su propio estado, +y luego haga interfaces de usuario complejas. + +Como la lógica de los componentes está escrita en JavaScripty y no en templates, +tú puedes pasar fácilmente datos a través de tu aplicación y mantener el estado fuera del DOM. -Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. From e3780de49e80b3f2f10f8c0b980b93992b60caab Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Thu, 7 Feb 2019 22:46:24 -0600 Subject: [PATCH 3/7] Fixed the translate --- content/home/examples/a-simple-component.md | 6 +++--- content/home/marketing/component-based.md | 7 +++---- content/home/marketing/declarative.md | 4 ++-- content/home/marketing/learn-once-write-anywhere.md | 7 ++++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md index d791856d4..99838a4c7 100644 --- a/content/home/examples/a-simple-component.md +++ b/content/home/examples/a-simple-component.md @@ -1,9 +1,9 @@ --- -title: A Simple Component +title: Un Componente Simple order: 0 domid: hello-example --- -React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`. +Los componentes de React implementan un método llamado`render()` que recibe datos de entrada y los muestra. Este ejemplo utiliza una sintaxis similar a XML llamada JSX. Puedes acceder a los datos de entrada que se pasan al componente mediante `render()` a través de `this.props`. -**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step. +**JSX es opcional y no se requiere para usar React.** Prueba [Babel REPL](babel://es5-syntax-example) para ver el código JavaScript sin procesar la compilación de JSX. diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md index 4727eda95..f7d110e26 100644 --- a/content/home/marketing/component-based.md +++ b/content/home/marketing/component-based.md @@ -4,8 +4,7 @@ order: 1 --- Cree componentes encapsulados que manejen su propio estado, -y luego haga interfaces de usuario complejas. - -Como la lógica de los componentes está escrita en JavaScripty y no en templates, -tú puedes pasar fácilmente datos a través de tu aplicación y mantener el estado fuera del DOM. +y conviértelos en interfaces de usuario complejas. +Ya que la lógica de los componentes está escrita en JavaScript y no en plantillas, +puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM. diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md index e18e2246d..0ff2d356a 100644 --- a/content/home/marketing/declarative.md +++ b/content/home/marketing/declarative.md @@ -2,6 +2,6 @@ title: Declarativo order: 0 --- -React hace que crear interfaces de usuario interactivas sea sencillo. Diseña vistas simples para cada estado en tu aplicación, y React actualizará y renderizara de manera eficiente los componentes correctos cuando sus datos cambien. +React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien. -Las vistas declarativas hacen que tu código sea más predecible y más fácil de depurar. +Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar. diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md index 009edf5bc..4d8465580 100644 --- a/content/home/marketing/learn-once-write-anywhere.md +++ b/content/home/marketing/learn-once-write-anywhere.md @@ -1,8 +1,9 @@ --- -title: Learn Once, Write Anywhere +title: Aprende una vez, Escríbelo donde sea order: 2 --- -We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. +En React no dejamos fuera al resto de sus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente. -React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/). +React puede también renderizar desde el servidor usando Node, así como potencializar apps a través de React Native +[React Native](https://facebook.github.io/react-native/). \ No newline at end of file From d50180c375ea4f46fbac5c8e139cb157f6cb84d1 Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Thu, 7 Feb 2019 22:52:22 -0600 Subject: [PATCH 4/7] Fixed the text in third paragraph --- content/home/marketing/learn-once-write-anywhere.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md index 4d8465580..bdf8cf86c 100644 --- a/content/home/marketing/learn-once-write-anywhere.md +++ b/content/home/marketing/learn-once-write-anywhere.md @@ -5,5 +5,5 @@ order: 2 En React no dejamos fuera al resto de sus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente. -React puede también renderizar desde el servidor usando Node, así como potencializar apps a través de React Native +React puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando [React Native](https://facebook.github.io/react-native/). \ No newline at end of file From fa292c1d15b1df992133e9f0aa5928c4c1e2c4ae Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Fri, 8 Feb 2019 08:06:21 -0600 Subject: [PATCH 5/7] Translate A Stateful Component --- content/home/examples/a-stateful-component.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md index 78b2b9486..555caf832 100644 --- a/content/home/examples/a-stateful-component.md +++ b/content/home/examples/a-stateful-component.md @@ -1,7 +1,7 @@ --- -title: Un componente con estado +title: Un Componente Con Estado order: 1 domid: timer-example --- -Además de recibir datos de entrada (a través de `this.props`), un componente puede tener un estado interno de los datos (a través de `this.state`). Cuando el estado de un componente componente cambia sus datos, los elementos renderizados serán actualizados mediante la re-invocación de render(). +Además de obtener datos de entrada (a los que accedes a través de `this.props`),un componente puede tener datos en su estado internamente (a los que accedes a través de `this.state`). Cuando el estado del componente cambie de datos, el cambio se representará actualizando e invocando `render()`. From 4f8afcb3a3af29462b4765dbed6fb8b0738bf842 Mon Sep 17 00:00:00 2001 From: Nancy Zitle Date: Fri, 8 Feb 2019 08:21:33 -0600 Subject: [PATCH 6/7] Resolve conflict --- content/docs/hooks-reference.md | 2 +- content/docs/reference-events.md | 6 +++--- src/pages/index.js | 3 ++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 632152093..318cb450e 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -411,7 +411,7 @@ function useFriendStatus(friendID) { #### Defer formatting debug values {#defer-formatting-debug-values} >>>>>>> aada3a308493614b7d5b4b438b5c345d7ecc6c53 -#### Aplazar el formato de los valores de depuración +#### Aplazar el formato de los valores de depuración {#aplazar-el-formato-de-los-valores-de-depuración} En algunos casos, formatear un valor para mostrar puede ser una operación costosa. También es innecesario a menos que un Hook sea realmente inspeccionado. diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 51df0e259..7d77c62c1 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -65,7 +65,7 @@ function onClick(event) { <<<<<<< HEAD > Si desea acceder a las propiedades del evento de forma asíncrona, debe llamar a `event.persist()` en el evento, lo que eliminará el evento sintético del grupo y permitirá que el código de usuario retenga las referencias al evento. -## Eventos Soportados +## Eventos Soportados {#eventos-soportados} React normaliza los eventos para que tengan propiedades consistentes en diferentes navegadores. @@ -90,9 +90,9 @@ Los controladores de eventos a continuación se activan por un evento en la fase * * * -## Referencia +## Referencia {#referencia} -### Eventos del Portapapeles +### Eventos del Portapapeles {#eventos-del-portapapeles} ======= > If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code. diff --git a/src/pages/index.js b/src/pages/index.js index d186065b9..ed682baeb 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -134,7 +134,8 @@ class Home extends Component { fontSize: 30, }, }}> - Una librería de JavaScript para construir interfaces de usuario + Una librería de JavaScript para construir interfaces de + usuario

Date: Sun, 10 Feb 2019 13:34:22 -0500 Subject: [PATCH 7/7] Delete reference-events.md --- content/docs/reference-events.md | 422 ------------------------------- 1 file changed, 422 deletions(-) delete mode 100644 content/docs/reference-events.md diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md deleted file mode 100644 index 7d77c62c1..000000000 --- a/content/docs/reference-events.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: events -title: SyntheticEvent -permalink: docs/events.html -layout: docs -category: Reference ---- - -Esta guía de referencia documenta el contenedor `SyntheticEvent` que forma parte del sistema de eventos de React. Consulte la guía [Eventos de manipulación](/docs/handling-events.html) para obtener más información. - -## Overview {#overview} - -A sus manejadores de eventos se les pasarán instancias de `SyntheticEvent`, un contenedor agnóstico al navegador alrededor del evento nativo del navegador. Tiene la misma interfaz que el evento nativo del navegador, incluyendo `stopPropagation()` y `preventDefault()`, excepto que los eventos funcionan de manera idéntica en todos los navegadores. - -Si encuentras que necesitas el evento del navegador subyacente por alguna razón, simplemente use el atributo `nativeEvent` para obtenerlo. Cada objeto `SyntheticEvent` tiene los siguientes atributos: - -```javascript -boolean bubbles -boolean cancelable -DOMEventTarget currentTarget -boolean defaultPrevented -number eventPhase -boolean isTrusted -DOMEvent nativeEvent -void preventDefault() -boolean isDefaultPrevented() -void stopPropagation() -boolean isPropagationStopped() -DOMEventTarget target -number timeStamp -string type -``` - -> Nota: -> -> A partir de la versión 0.14, devolver `false` desde un controlador de eventos ya no detendrá la propagación de eventos. En su lugar, `e.stopPropagation()` o `e.preventDefault()` deben activarse manualmente, según corresponda. - -### Agrupación de eventos {#event-pooling} - -El `SyntheticEvent` está agrupado. Esto significa que el objeto `SyntheticEvent` se reutilizará y todas las propiedades se anularán después de que se haya invocado la devolución de llamada del evento. -Esto es por razones de rendimiento. -Como tal, no puede acceder al evento de forma asíncrona. - -```javascript -function onClick(event) { - console.log(event); // => objeto nulo. - console.log(event.type); // => "click" - const eventType = event.type; // => "click" - - setTimeout(function() { - console.log(event.type); // => null - console.log(eventType); // => "click" - }, 0); - - // No funcionará. this.state.clickEvent solo contendrá valores nulos. - this.setState({clickEvent: event}); - - // Todavía puedes exportar propiedades de eventos. - this.setState({eventType: event.type}); -} -``` - -> Nota: -> -<<<<<<< HEAD -> Si desea acceder a las propiedades del evento de forma asíncrona, debe llamar a `event.persist()` en el evento, lo que eliminará el evento sintético del grupo y permitirá que el código de usuario retenga las referencias al evento. - -## Eventos Soportados {#eventos-soportados} - -React normaliza los eventos para que tengan propiedades consistentes en diferentes navegadores. - -Los controladores de eventos a continuación se activan por un evento en la fase de propagación. Para registrar un controlador de eventos llamado en la fase de captura, agregue `Capture` al nombre del evento; por ejemplo, en lugar de usar `onClick`, usarías` onClickCapture` para manejar el evento de click en la fase de captura. - -- [Eventos del Portapapeles](#clipboard-events) -- [Eventos de Composición](#composition-events) -- [Eventos del Teclado](#keyboard-events) -- [Eventos de Enfoque](#focus-events) -- [Formar Eventos](#form-events) -- [Eventos del Ratón](#mouse-events) -- [Eventos del Puntero](#pointer-events) -- [Eventos de Selección](#selection-events) -- [Eventos Táctiles](#touch-events) -- [Eventos de la Interfaz de Usuario](#ui-events) -- [Eventos de la Rueda del Ratón](#wheel-events) -- [Eventos de Medios](#media-events) -- [Eventos de Imagen](#image-events) -- [Eventos de Animación](#animation-events) -- [Eventos de Transición](#transition-events) -- [Otros Eventos](#other-events) - -* * * - -## Referencia {#referencia} - -### Eventos del Portapapeles {#eventos-del-portapapeles} -======= -> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code. - -## Supported Events {#supported-events} - -React normalizes events so that they have consistent properties across different browsers. - -The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase. - -- [Clipboard Events](#clipboard-events) -- [Composition Events](#composition-events) -- [Keyboard Events](#keyboard-events) -- [Focus Events](#focus-events) -- [Form Events](#form-events) -- [Mouse Events](#mouse-events) -- [Pointer Events](#pointer-events) -- [Selection Events](#selection-events) -- [Touch Events](#touch-events) -- [UI Events](#ui-events) -- [Wheel Events](#wheel-events) -- [Media Events](#media-events) -- [Image Events](#image-events) -- [Animation Events](#animation-events) -- [Transition Events](#transition-events) -- [Other Events](#other-events) - -* * * - -## Reference {#reference} - -### Clipboard Events {#clipboard-events} ->>>>>>> aada3a308493614b7d5b4b438b5c345d7ecc6c53 - -Nombres de Eventos: - -``` -onCopy onCut onPaste -``` - -Propiedades: - -```javascript -DOMDataTransfer clipboardData -``` - -* * * - -### Eventos de Composición {#composition-events} - -Nombres de Eventos: - -``` -onCompositionEnd onCompositionStart onCompositionUpdate -``` - -Propiedades: - -```javascript -string data - -``` - -* * * - -### Eventos del Teclado {#keyboard-events} - -Nombres de Eventos: - -``` -onKeyDown onKeyPress onKeyUp -``` - -Propiedades: - -```javascript -boolean altKey -number charCode -boolean ctrlKey -boolean getModifierState(key) -string key -number keyCode -string locale -number location -boolean metaKey -boolean repeat -boolean shiftKey -number which -``` - -La propiedad `key` puede tomar cualquiera de los valores documentados en [la especificación de DOM Level 3 Events](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). - -* * * - -### Eventos de Enfoque {#focus-events} - -Nombres de Eventos: - -``` -onFocus onBlur -``` - -Estos eventos de enfoque funcionan en todos los elementos en React DOM, no sólo en los elementos de formulario. - -Propiedades: - -```javascript -DOMEventTarget relatedTarget -``` - -* * * - -### Eventos de Formulario {#form-events} - -Nombres de Eventos: - -``` -onChange onInput onInvalid onSubmit -``` - -Para obtener más información sobre el evento onChange, consulte [Formularios](/docs/forms.html). - -* * * - -### Eventos del Ratón {#mouse-events} - -Nombres de Eventos: - -``` -onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit -onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave -onMouseMove onMouseOut onMouseOver onMouseUp -``` - -Los eventos `onMouseEnter` y `onMouseLeave` se propagan desde el elemento que se deja hasta el que se ingresa en lugar del bubbling normal y no tienen una fase de captura. - -Propiedades: - -```javascript -boolean altKey -number button -number buttons -number clientX -number clientY -boolean ctrlKey -boolean getModifierState(key) -boolean metaKey -number pageX -number pageY -DOMEventTarget relatedTarget -number screenX -number screenY -boolean shiftKey -``` - -* * * - -### Eventos Puntero {#pointer-events} - -Nombres de Eventos: - -``` -onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture -onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut -``` - -Los eventos `onPointerEnter` y `onPointerLeave` se propagan desde el elemento que se deja hasta el que se ingresa en lugar del bubbling normal y no tienen una fase de captura. - -Propiedades: - -Como se define en [la especificación W3](https://www.w3.org/TR/pointerevents/), los eventos de puntero extienden los [Eventos de Ratón](#mouse-events) con las siguientes propiedades: - -```javascript -number pointerId -number width -number height -number pressure -number tangentialPressure -number tiltX -number tiltY -number twist -string pointerType -boolean isPrimary -``` - -Una nota sobre la compatibilidad con varios navegadores: - -Los eventos de puntero aún no son compatibles con todos los navegadores (en el momento de escritura de este artículo, los navegadores compatibles incluyen: Chrome, Firefox, Edge e Internet Explorer). React deliberada no admite polyfill para otros navegadores, ya que un polyfill de conformidad estándar aumentaría significativamente el tamaño del paquete de `react-dom`. - -Si su aplicación requiere eventos de puntero, le recomendamos que agregue un polyfill de evento de puntero de terceros. - -* * * - -### Eventos de Selección {#selection-events} - -Nombres de Eventos - -``` -onSelect -``` - -* * * - -### Eventos Táctiles {#touch-events} - -Nombres de Eventos: - -``` -onTouchCancel onTouchEnd onTouchMove onTouchStart -``` - -Propiedades: - -```javascript -boolean altKey -DOMTouchList changedTouches -boolean ctrlKey -boolean getModifierState(key) -boolean metaKey -boolean shiftKey -DOMTouchList targetTouches -DOMTouchList touches -``` - -* * * - -### Eventos de la Interfaz de Usuario {#ui-events} - -Nombres de Eventos: - -``` -onScroll -``` - -Propiedades: - -```javascript -number detail -DOMAbstractView view -``` - -* * * - -### Eventos de la Rueda del Ratón {#wheel-events} - -Nombres de Eventos: - -``` -onWheel -``` - -Propiedades: - -```javascript -number deltaMode -number deltaX -number deltaY -number deltaZ -``` - -* * * - -### Eventos de Medios {#media-events} - -Nombres de Eventos: - -``` -onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted -onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay -onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend -onTimeUpdate onVolumeChange onWaiting -``` - -* * * - -### Eventos de Imagen {#image-events} - -Nombres de Eventos: - -``` -onLoad onError -``` - -* * * - -### Eventos de Animación {#animation-events} - -Nombres de Eventos: - -``` -onAnimationStart onAnimationEnd onAnimationIteration -``` - -Propiedades: - -```javascript -string animationName -string pseudoElement -float elapsedTime -``` - -* * * - -### Eventos de Transición {#transition-events} - -Nombres de Eventos: - -``` -onTransitionEnd -``` - -Propiedades: - -```javascript -string propertyName -string pseudoElement -float elapsedTime -``` - -* * * - -### Otros Eventos {#other-events} - -Nombres de Eventos: - -``` -onToggle -```