diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..53647d12c 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 { @@ -39,37 +39,37 @@ 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. +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 `` in an extra `
`. This is necessary because Chosen will append another DOM element right after the ``. Musimy tak zrobić, ponieważ Chosen doda własny element DOM zaraz za `` node in `componentDidMount`, and tear it down in `componentWillUnmount`: +Teraz zaimplementujemy metody cyklu życia. Zainicjalizujemy wtyczkę Chosen, przekazując jej referencję do węzła ` this.el = el}> ``` -This is enough to get our component to render, but we also want to be notified about the value changes. To do this, we will subscribe to the jQuery `change` event on the `` zarządzanym przez Chosen. -We won't pass `this.props.onChange` directly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare a `handleChange()` method that calls `this.props.onChange`, and subscribe it to the jQuery `change` event: +Nie przekazujemy `this.props.onChange` bezpośrednio do Chosen, ponieważ właściwości komponentu, włącznie z procedurami obsługi zdarzeń, mogą się zmieniać w czasie. Zamiast tego zadeklarujemy metodę `handleChange()`, która wywołuje `this.props.onChange`, i za pomocą jQuery zasubskrybujemy ją na zdarzenie `change`: ```js{5,6,10,14-16} componentDidMount() { @@ -131,11 +131,11 @@ handleChange(e) { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010) +[**Wypróbuj kod na CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010) -Finally, there is one more thing left to do. In React, props can change over time. For example, the `` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us. +Pozostała jeszcze jedna kwestia. W świecie Reacta właściwości są zmienne w czasie. Na przykład, komponent `` może otrzymać innych potomków po zmianie stanu komponentu nadrzędnego. Oznacza to, że w miejscach integracji koniecznie trzeba ręcznie aktualizować DOM w odpowiedzi na zmiany właściwości, ponieważ w tych miejscach React nie zrobi tego za nas. -Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside ``, a ponadto dodajmy metodę cyklu życia `componentDidUpdate()`, która powiadomi Chosen o zmianach w liście potomków: ```js{2,3} componentDidUpdate(prevProps) { @@ -145,9 +145,9 @@ componentDidUpdate(prevProps) { } ``` -This way, Chosen will know to update its DOM element when the `` zarządzanego przez Reacta. -The complete implementation of the `Chosen` component looks like this: +Kompletna implementacja komponentu `Chosen` wygląda następująco: ```js class Chosen extends React.Component { @@ -158,7 +158,7 @@ class Chosen extends React.Component { this.handleChange = this.handleChange.bind(this); this.$el.on('change', this.handleChange); } - + componentDidUpdate(prevProps) { if (prevProps.children !== this.props.children) { this.$el.trigger("chosen:updated"); @@ -169,7 +169,7 @@ class Chosen extends React.Component { this.$el.off('change', this.handleChange); this.$el.chosen('destroy'); } - + handleChange(e) { this.props.onChange(e.target.value); } @@ -186,57 +186,57 @@ 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