From 07dd6e86a15728e30d82e5d8baf34ddf5d005654 Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Tue, 17 Dec 2019 23:29:41 +0100 Subject: [PATCH 1/2] Translate 'Integrating with other libraries' page --- .../docs/integrating-with-other-libraries.md | 197 ++++++++---------- 1 file changed, 91 insertions(+), 106 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..848ddc60a 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: Integracja z innymi bibliotekami 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](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +Reacta można używać w dowolnej aplikacji webowej. Można go osadzić w innej aplikacji, a także, przy odrobinie wysiłku, inną aplikację można osadzić w kodzie reactowym. W tym poradniku przeanalizujemy kilka powszechnych sytuacji dotyczących integracji z [jQuery](https://jquery.com/) i [Backbonem](https://backbonejs.org/). Mimo wszystko te same metody mogą zadziałać przy integracji komponentów z dowolnym kodem. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Integracja z wtyczkami manipulującymi DOM-em {#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 nie wie nic o zmianach w modelu DOM, które wprowadzono poza Reactem. Decyduje, co należy zaktualizować, bazując na własnej, wewnętrznej reprezentacji. Dlatego jeśli węzły DOM zostaną zmienione przez inną bibliotekę, React wpada w zakłopotanie i nie wie, co robić. -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. +Nie oznacza to jednak, że łączenie Reacta z innymi sposobami manipulacji modelu DOM jest niemożliwe czy jakoś szczególnie trudne. Trzeba tylko mieć pewność, że się rozumie, co które z nich robi. -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 `
`. +Najprostszym sposobem na uniknięcie konfliktów jest powstrzymanie Reacta przed aktualizowaniem komponentu. Można to zrobić renderując elementy, których React nie ma potrzeby aktualizować, jak np. pusty `
`. -### How to Approach the Problem {#how-to-approach-the-problem} +### Jak podejść do problemu? {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Aby lepiej to zobrazować, stwórzmy szkic kodu opakowującego generyczny plugin do jQuery. -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. +Dodamy [referencję](/docs/refs-and-the-dom.html) (`ref`) do korzenia drzewa DOM. Dostęp do niej otrzymamy wewnątrz metody `componentDidMount`, gdzie będziemy mogli przekazać ją dalej do wtyczki. -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: +Aby powstrzymać Reacta przed ingerowaniem w model DOM po zamontowaniu komponentu, w metodzie `render()` zwrócimy pusty znacznik `
`. Taki element `
` nie ma żadnych właściwości ani potomków, dlatego React nie ma powodu, żeby go aktualizować, pozwalając tym samym wtyczce na zarządzanie tą częścią drzewa DOM: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -34,49 +34,49 @@ class SomePlugin extends React.Component { } render() { - return
this.el = el} />; + return
(this.el = el)} />; } } ``` -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. +Zwróć uwagę, że zdefiniowaliśmy dwie [metody cyklu życia](/docs/react-component.html#the-component-lifecycle): `componentDidMount` i `componentWillUnmount`. Wiele wtyczek do jQuery podpina detektory zdarzeń (ang. _event listeners_) do modelu DOM, dlatego trzeba pamiętać o ich odpięciu w `componentWillUnmount`. Jeśli wtyczka nie udostępnia metody czyszczącej, prawdopodobnie trzeba stworzyć ją samodzielnie, pamiętając, aby odpiąć wszystkie detektory zdarzeń dodane przez wtyczkę i zapobiec tym samym wyciekom pamięci. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Integracja z wtyczką Chosen do jQuery {#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 ``. ->**Note:** +> **Uwaga:** > ->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. +> Nawet jeśli tak się da, nie znaczy, że jest to najlepsze podejście w przypadku aplikacji reactowych. Zachęcamy do korzystania bezpośrednio z komponentów reactowych, jeśli jest taka możliwość. Są one łatwiejsze w użyciu, a także dają większą kontrolę nad zachowaniem i wyglądem interfejsu użytkownika. -First, let's look at what Chosen does to the DOM. +Najpierw przyjrzyjmy się, co wtyczka Chosen robi z modelem DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Jeśli wywołasz ją na węźle DOM z elementem `` wrapped in a `
`: +Najpierw stwórzmy pusty komponent z metodą `render()`, która zwraca ` this.el = el}> +
@@ -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. +Zwróć uwagę, że wstawiliśmy dodatkowy element `
`, który opakowuje ``. Mimo to, z perspektywy Reacta, ten `
` ma zawsze tylko jednego potomka. Dzięki temu zmiany wprowadzane przez Reacta nie będą konfliktowały z dodatkowym elementem wstawionym przez wtyczkę Chosen. Pamiętaj, że jeśli w jakikolwiek sposób modyfikujesz DOM poza Reactem, musisz upewnić się, że React nie ma powodu do zmian tych węzłów DOM. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` wewnątrz metody `componentDidMount`, a po wszystkim posprzątamy w `componentWillUnmount`. ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Wypróbuj kod na CodePen**](https://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: +Pole `this.el` nie ma żadnego specjalnego znaczenia dla Reacta. Mimo to kod działa, ponieważ wcześniej, w metodzie `render()`, przypisaliśmy do pola referencję wewnątrz `ref`. ```js ` managed by Chosen. +Powyższy kod wystarczy, aby wyrenderować nasz komponent, jednak dodatkowo chcielibyśmy również być informowani o zmianie wartości pola. Możemy to osiągnąć nasłuchując na zdarzenia `change` wywoływane na elemencie ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Dokumentacja wtyczki Chosen sugeruje korzystać z interfejsu `trigger()` biblioteki jQuery do powiadamiania o zmianach na oryginalnym elemencie DOM. Każmy więc Reactowi zająć się aktualizowaniem `this.props.children` wewnątrz `` children managed by React change. +W ten sposób powiadomimy wtyczkę Chosen, że musi zaktualizować swoje elementy DOM, gdy zmienią się potomkowie elementu ` this.el = el}> +
@@ -186,76 +186,69 @@ class Chosen extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010) +[**Wypróbuj kod na CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010) -## Integrating with Other View Libraries {#integrating-with-other-view-libraries} +## Integracja z innymi bibliotekami do obsługi widoków {#integrating-with-other-view-libraries} -React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render). +Osadzenie Reacta wewnątrz innych aplikacji jest możliwe dzięki elastyczności funkcji [`ReactDOM.render()`](/docs/react-dom.html#render). -Although React is commonly used at startup to load a single root React component into the DOM, `ReactDOM.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app. +Mimo że Reacta zwykle używa się na starcie aplikacji do załadowania jednego głównego komponentu do DOM, funkcję `ReactDOM.render()` można wywołać wielokrotnie w niezależnych fragmentach interfejsu, niezależnie od tego, czy są małe jak przycisk, czy dużych jak cała aplikacja. -In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code. +Prawdę mówiąc, właśnie w taki sposób używamy Reacta na Facebooku. To podejście pozwala nam pisać aplikacje kawałek po kawałku i łączyć je z istniejącymi szablonami wygenerowanymi po stronie serwera czy z innym kodem klienckim. -### Replacing String-Based Rendering with React {#replacing-string-based-rendering-with-react} +### Zastąpienie renderowania opartego na ciągu znaków {#replacing-string-based-rendering-with-react} -A common pattern in older web applications is to describe chunks of the DOM as a string and insert it into the DOM like so: `$el.html(htmlString)`. These points in a codebase are perfect for introducing React. Just rewrite the string based rendering as a React component. +Popularnym wzorcem w starszych aplikacjach webowych było opisywanie fragmentów drzewa DOM za pomocą ciągu znaków, a następnie wstawianie ich do modelu na przykład tak: `$el.html(htmlString)`. Tego typu miejsca w kodzie są idealnymi kandydatami na wprowadzenie Reacta. Wystarczy przepisać owe fragmenty na komponenty reactowe. -So the following jQuery implementation... +Wobec tego taki kod napisany w jQuery... ```js -$('#container').html(''); +$('#container').html(''); $('#btn').click(function() { - alert('Hello!'); + alert('Cześć!'); }); ``` -...could be rewritten using a React component: +...mógłby zostać zastąpiony komponentem reactowym: ```js function Button() { - return ; + return ; } -ReactDOM.render( - ; + return ; } function HelloButton() { function handleClick() { - alert('Hello!'); + alert('Cześć!'); } return ; } -ReactDOM.render(