Skip to content
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.

Sign up for GitHub

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

Web Component translation #88

Merged
merged 5 commits into from
Feb 6, 2019
Merged

Web Component translation #88

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
34aacaf
Web Component translation into spanish
Paolore Feb 6, 2019
407c5db
Changes suggested by typography in the translation and change to the …
Paolore Feb 6, 2019
26974b2
Link in spanish
Paolore Feb 6, 2019
d26a018
Translation web component
Paolore Feb 6, 2019
6fb93a8
Update translation web components
Paolore Feb 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions content/docs/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ redirect_from:
- "docs/webcomponents.html"
---

React y [Web Components](https://developer.mozilla.org/es/docs/Web/Web_Components) estan construidos para resolver diferentes problemas. `Web Components` proporciona una fuerte encapsulación para componentes reutilizables, mientras que React proporciona una biblioteca declarativa que mantiene el DOM sincronizado con sus datos. Los dos objetivos se complementan. Como desarrollador, eres libre de usar React en tus `Web Components`, utilizar `Web Components` en React, o ambos.
React y [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) están construidos para resolver diferentes problemas. `Web Components` proporciona una fuerte encapsulación para componentes reutilizables, mientras que React proporciona una biblioteca declarativa que mantiene el DOM sincronizado con tus datos. Los dos objetivos se complementan. Como desarrollador, eres libre de usar React en tus `Web Components`, utilizar `Web Components` en React, o ambos.

La mayoria de las personas que usan React no utilizan `Web Components`, pero es posible que desees hacerlo, especialmente si estás utilizando componentes de IU de terceros que se escriben utilizando `Web Components`.
La mayoría de las personas que usan React no utilizan `Web Components`, pero es posible que desees hacerlo, especialmente si estás utilizando componentes de IU de terceros que se escriben utilizando `Web Components`.

## Usando `Web Components` en React

Expand All @@ -22,12 +22,12 @@ class HelloMessage extends React.Component {

> Nota:
>
> Los `Web Component` a menudo exponen una API imperativa. Por ejemplo, un `Web Component` `video` podría exponer las funciones `play()` y `pause()`. Para acceder a un API imperativa de un `Web Component`, necesitarás utilizar una referencia para interactuar con el DOM directamente. Si estás utilizando `Web Component` de terceros, lo mejor sería escribir un componente React que sirva como un contenedor para tu `Web Component`.
> Los `Web Components` a menudo exponen una API imperativa. Por ejemplo, un `Web Components` `video` podría exponer las funciones `play()` y `pause()`. Para acceder a un API imperativa de un `Web Components`, necesitarás utilizar una referencia para interactuar con el DOM directamente. Si estás utilizando `Web Components` de terceros, lo mejor sería escribir un componente React que sirva como un contenedor para tu `Web Components`.
>
> Los eventos emitidos por un `Web Component` pueden no distribuirse correctamente a través de un árbol de renderizado React.
> Los eventos emitidos por un `Web Components` pueden no distribuirse correctamente a través de un árbol de renderizado React.
> Deberás agregar manualmente los controladores de eventos para manejarlos dentro de tus componentes React.

Una cosa que puede confundirte es que los `Web Component` usan ***"class"*** en vez de ***"className"***
Una cosa que puede confundirte, es que los `Web Components` usan ***"class"*** en vez de ***"className"***

```javascript
function BrickFlipbox() {
Expand Down Expand Up @@ -58,5 +58,5 @@ customElements.define('x-search', XSearch);

>Nota:
>
>Este codigo **NO** funcionará si transformas clases con Babel. Ver [Este asunto](https://github.com/w3c/webcomponents/issues/587) para la discusión.
>Este código **NO** funcionará si transformas clases con Babel. Ver [Este asunto](https://github.com/w3c/webcomponents/issues/587) para la discusión.
>Incluye el [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) Antes de cargar tus `Web Components` para que puedas solucionar este problema.