diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md deleted file mode 100644 index 51df0e259..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 - -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 - -### 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 -``` diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md index 5a12d6bc4..99838a4c7 100644 --- a/content/home/examples/a-simple-component.md +++ b/content/home/examples/a-simple-component.md @@ -1,8 +1,9 @@ --- -title: Un componente simple +title: Un Componente Simple order: 0 domid: hello-example --- -Los componentes de React implementan un método `render()`, el cual toma datos de entrada y devuelve lo que se tiene que mostrar. En este ejemplo usaremos una sintaxis similar a XML llamado JSX. Los datos de entrada que son pasados al componente son accesibles en `render()` usando `this.props`. -**JSX es opcional y no es requisito en React** Prueba [Babel REPL](babel://es5-syntax-example) para ver el código Javascript producto de la compilación de JSX. +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 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/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()`. diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md index aeb3c4de2..f7d110e26 100644 --- a/content/home/marketing/component-based.md +++ b/content/home/marketing/component-based.md @@ -1,8 +1,10 @@ --- -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 conviértelos en interfaces de usuario complejas. -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. +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 c3b651902..0ff2d356a 100644 --- a/content/home/marketing/declarative.md +++ b/content/home/marketing/declarative.md @@ -1,8 +1,7 @@ --- -title: Declarative +title: Declarativo order: 0 --- +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. -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, 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..bdf8cf86c 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 aplicaciones móviles usando +[React Native](https://facebook.github.io/react-native/). \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index bc2d732fd..ed682baeb 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -134,7 +134,8 @@ 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 +292,7 @@ class Home extends Component { - Take the Tutorial + Haz el tutorial