From 5c0eeacc874c4ea813c15924f072bd9a67d626fb Mon Sep 17 00:00:00 2001 From: Thulio Philipe Date: Fri, 8 Feb 2019 20:33:11 -0300 Subject: [PATCH 01/25] Updates the translate version of Integrating with other libraries. --- .../docs/integrating-with-other-libraries.md | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 18a67c457..c15d8f62a 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Integrando com outras Bibliotecas permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React pode ser utilizado em qualquer aplicação web. Ele pode ser embutido em outras aplicações e, com um pouco de cuidado, outras aplicações podem ser incorporadas ao React. Este guia vai examinar alguns dos mais comuns usos de caso, focando na integracão com [jQuery](https://jquery.com/) e [Backbone](http://backbonejs.org/), mas as mesmas idéias podem ser aplicadas para integrar componentes com qualquer código existente. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Integrando com Plugins de Manipulacão do DOM {#integrating-with-dom-manipulation-plugins} -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 desconhece qualquer alteração feita no DOM fora do React. Ele determina as atualizacões com base na sua própria representacão interna, e se os mesmos nós do DOM forem manipulados por outras bibliotecas, React fica confuso e não sabe como proceder. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +Isto não significa que é impossível ou mesmo necessariamente difícil de combinar React com outras maneiras de afetar o DOM, você apenas precisa estar atento ao que cada um está fazendo. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +A maneira mais fácil de evitar conflitos é evitando com que o componente React atualize. Você pode fazer isto, renderizando elementos que o React não tem motivos para atualizar, como uma `
` vazia. -### How to Approach the Problem {#how-to-approach-the-problem} +### Como Abordar o Problema {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Para demonstrar isto, vamos esboçar um wrapper para um plugin jQuery genérico. -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. +Nós vamos adicionar um [ref](/docs/refs-and-the-dom.html) para o elemento root no DOM. Dentro do `componentDidMount`, nós vamos ter a referência desse elemento para passar para o plugin jQuery. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Para evitar com que o React toque no DOM depois de montado, nós vamos retornar uma `
` vazia para o método `render()`. O elemento `
`, não possui propriedades ou filhos, assim o React não tem razão para atualiza-lo, deixando o plugin jQuery livre para gerenciar esta parte do DOM: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,21 +39,21 @@ 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. +Note que nós definimos ambos `componentDidMount` e `componentWillUnmount` [métodos do ciclo de vida](/docs/react-component.html#the-component-lifecycle). Muitos plugins jQuery adicionam listeners de eventos para o DOM, e é importante removê-los no `componentWillUnmount`. Se o plugin não fornece um método para limpeza, você vai provavelmente ter que criar o seu próprio, lembrando de remover qualquer listener do plugin registrado para evitar vazamento de memória. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Integrando com o plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} -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 `` inputs. ->**Note:** +>**Nota:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +> Apenas porque isto é possível, não significa que este é a melhor maneira para apps React. Nós encorajamos você a utilizar componentes React quando você puder. Componentes React são fáceis de reutilizar em aplicacões React, e muitas vezes fornecem mais controle sobre seu comportamento e aparência. -First, let's look at what Chosen does to the DOM. +Primeiro, vamos olhar o que Chosen faz no DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Se você chama-lo em um nó DOM ``. Em seguida, ele dispara um evento do jQuery, para notificar sobre as alteracões. -Let's say that this is the API we're striving for with our `` wrapper React component: +Vamos supor que esta é a API onde nós estamos nos esforcando para com o nosso `` React componente: ```js function Example() { @@ -67,9 +67,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Nós vamos implementá-lo como um [componente não controlado](/docs/uncontrolled-components.html) pela simplicidade. -First, we will create an empty component with a `render()` method where we return `` em volta de uma `
` ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Note como envolvemos o `` que passamos para ele. Contudo, no que diz respeito ao React, `
` sempre tem apenas um único filho. Isto é como nós garantimos que as atualizacões do React não vão conflitar com o nó extra do DOM adicionado pelo Chosen. É importante que se você modificar o DOM fora do fluxo do React, você deve garantir que React não tem um motivo para acessar esses nós do DOM. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` no `componentDidMount`, e destruí-lo no `componentWillUnmount`. ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Experimente no Codepen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Note que React não atribui nenhum significado especial para o campo `this.el`. Isto apenas funciona porque nós atribuimos anteriormente um valor para este campo, com um `ref` no método `render()`: ```js ` managed by Chosen. +Isto é suficiente para renderizar o nosso componente, mas também queremos ser notificados quando os valores mudarem. Para fazer isto, vamos ouvir os eventos de `change` do jQuery no ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +A documentação do Chosen, sugere que nós podemos utilizar a API do jQuery `trigger()` para notificar sobre as mudanças do elemento DOM original. Nós vamos deixar o React cuidar da atualização `this.props.children` dentro do `` children managed by React change. +Desta forma, Chosen vai saber atualizar o DOM quando os filhos do `` inputs. +Para um exemplo mais concreto desses conceitos, vamos escrever um wrapper mínimo para o plugin [Chosen](https://harvesthq.github.io/chosen/), que amplia inputs ``, ele lê os atributos do nó DOM original, esconde-os com um estilo inline, e então adiciona um nó DOM separado com sua própria representacão visual, logo após o ``, ele lê os atributos do nó DOM original, esconde-os com um estilo inline, e então adiciona um nó DOM separado com sua própria representação visual, logo após o `` em uma `
` extra. Isto é necessário porque Chosen vai adicionar um outro elemento DOM logo após o `` em uma `
` extra. Isto é necessário porque Chosen vai adicionar um outro elemento DOM logo após o `` no `componentDidMount`, e destruí-lo no `componentWillUnmount`. @@ -108,7 +108,7 @@ Note que React não atribui nenhum significado especial para o campo `this.el`. ` controlado pelo Chosen. +Isto é suficiente para renderizar o nosso componente, mas também queremos ser notificados quando os valores mudarem. Para fazer isto, vamos assinar os eventos de `change` do jQuery no ``. +Para um exemplo mais concreto desses conceitos, vamos escrever um wrapper mínimo para o plugin [Chosen](https://harvesthq.github.io/chosen/), que aumenta as opções (