diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..ae8892ebf 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: Digər Kitabxanalar ilə İnteqrasiya 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. +React bütün veb applikasiyalarda işlənilə bilər. React-i digər applikasiyalara və digər applikasiyları React-ə qoşmaq mümkündür. Bu sənəddə çox işlənilən ssenarilərə baxacağıq. Əsas olaraq [jQuery](https://jquery.com/) və [Backbone](https://backbonejs.org/) kitabxanalarına inteqrasiyaya fokuslandığımıza baxmayaraq istifadə olunan fikirlər ilə komponentləri hər hansı mövcud koda inteqrasiya etmək mümkündür. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## DOM Manipulyasiya Plaginlərinə İnteqrasiya {#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. +DOM-da React-dən kənarda baş verən dəyişikliklərdən React-in xəbəri yoxdur. React yalnız daxili strukturundan istifadə edərək DOM-u yeniləyir. Əgər DOM nodları digər kitabxana tərəfindən manipulyasiya olunursa, React-in başı qarışır və bu vəziyyətdən bərpa oluna bilmir. -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. +Lakin bu, DOM-u təsir edən digər həllər ilə React-i birləşdirməyin mümkün olmaması və ya çətin olması anlamına gəlmir. Sadəcə olaraq, hər həllin işləmə prinsipləri haqda zehinli olmaq lazımdır. -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 `
`. +React komponentinin yenilənməsinin qarşısını almaq, ziddiyətləri aradan qaldırmaq üçün ən asan yoldur. React-in yeniləməyə səbəbi olmayan elementlər (məsələn boş `
`) render edərək bu ziddiyətlərini qarşısını ala bilərsiniz. -### How to Approach the Problem {#how-to-approach-the-problem} +### Problemə Yanaşma {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Bunu göstərə bilmək üçün sadə jQuery plaginini əhatə edən komponent yaradaq. -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. +Biz ana DOM elementinə [ref](/docs/refs-and-the-dom.html) qoşub `componentDidMount` funksiyasında bu elementə referans alıb jQuery plagininə göndərəcəyik. -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: +React-in ilkin renderdən sonra DOM-u render etməsinin qarşısını almaq üçün `render()` funksiyasından boş `
` elementi qaytaracağıq. `
` elementinin parametrləri və ya uşaqları olmadığından, React-in bu komponenti yeniləməsinin heç bir mənası yoxdur. Bu səbəbdən jQuery plagini DOM-un bu hissəsini problemsiz dəyişə bilər: ```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. +Nəzərə alın ki, biz `componentDidMount` və `componentWillUnmount` [lifecycle funksiyalarını](/docs/react-component.html#the-component-lifecycle) təyin edirik. Bir çox jQuery plaginləri DOM-a hadisə işləyiciləri qoşduğundan, bu hadisə işləyicilərini `componentWillUnmount`-da ayırmaq lazımdır. Əgər plagin təmizlik üçün heç bir funksiya təmin etmirsə, siz bunu özünüz təmin etməli ola bilərsiniz. Yaddaş sızmalarının olmaması üçün hadisə işləyicilərini silməyi yaddan çıxarmayın. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### jQuery Chosen Plagini ilə İnteqrasiya {#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 `` sahələrinə əlavələr edən [Chosen](https://harvesthq.github.io/chosen/) plaginini əhatə edən komponent yaradaq. ->**Note:** +>**Qeyd:** > ->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. +>Bu həllin mümkün olması React applikasiyaları üçün ən yaxşı yol anlamına gəlmir. Biz işlədə bildiyiniz halda React komponentləri işlətməyi tövsiyyə edirik. React komponentlərini React applikasiyalarında işlətmək daha asandır. Əlavə olaraq bu komponentlərin üzərində davranış və görünüş dəyişikləri üçün daha çox kontrol var. -First, let's look at what Chosen does to the DOM. +İlk olaraq, gəlin Chosen plugininin DOM-un üzərində nə etdiyinə baxaq. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Bu plagini `` wrapped in a `
`: +İlk öncə, `render()` funksiyası `
`-in daxilində `` in an extra `
`. This is necessary because Chosen will append another DOM element right after the `` elementini əhatə etdiyimizə fikir verin. Bunun olması vacibdir. Çünki, Chosen plagini `` node in `componentDidMount`, and tear it down in `componentWillUnmount`: +İndi biz lifecycle funksiyalarını tətbiq edəcəyik. Chosen plaginini `componentDidMount`-da ` 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 ``-in jQuery `change` hadisəsinə abunə olmaq lazımdır. -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: +Komponentin propları (hadisə işləyiciləri daxil olmaqla) zaman ilə dəyişdiyindən `this.props.onChange` propunu Chosen plagininə bir başa göndərməyəcəyik. Əvəzinə, `this.props.onChange` propu çağıran `handleChange()` funksiyası yaradıb, bu funksiyanı jQuery `change` hadisəsinə abunə edəcəyik: ```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) +[**CodePen-də Sınayın**](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. +Bir məsələnidə nəzərə almaq lazımdır. React-də proplar zaman ilə dəyişə bilər. Məsələn, valideyn komponentin vəziyyəti dəyişdikdə `` komponenti fərqli uşaqlar qəbul edə bilər. React-in DOM-u idarə etmədiyindən, prop yenilikləri əsasında DOM-u əl ilə yeniləmək lazımdır. -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 ``-in daxilində `this.props.children` propunu yeniləməsinə icazə verməyimizdən əlavə `componentDidUpdate()` lifecycle funksiyasından istifadə edərək Chosen-ə uşaq siyahısında baş verən dəyişikliklər haqqında xəbər verəcəyik: ```js{2,3} componentDidUpdate(prevProps) { @@ -145,9 +145,9 @@ componentDidUpdate(prevProps) { } ``` -This way, Chosen will know to update its DOM element when the ``-in uşaqlarını yenilədikdə, Chosen özünün DOM elementini yeniləyəcək. -The complete implementation of the `Chosen` component looks like this: +`Chosen` komponentinin tam tətbiqi aşağıdaki formada olacaq: ```js class Chosen extends React.Component { @@ -186,34 +186,34 @@ class Chosen extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010) +[**CodePen-də Sınayın**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010) -## Integrating with Other View Libraries {#integrating-with-other-view-libraries} +## Digər Kitabxanalar ilə İnteqrasiya {#integrating-with-other-view-libraries} -React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render). +[`ReactDOM.render()`](/docs/react-dom.html#render) funksiyasının elastikliyi React-i digər applikasiyalara əlavə etməyə imkan yaradır. -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. +Çox zaman React, tək ana React komponentini DOM-a yükləmək üçün işlədilir. Lakin `ReactDOM.render()` ilə UI-ın bir neçə müstəqil hissəsini (məsələn kiçik düymə və ya applikasiya kimi böyük) render etmək olar. -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. +Facebook-da React bu formada işlədilir. Bu bizə React-də applikasiyaları hissə hissə yazmağa və React hissələrini mövcud serverdə yaradılan şablon və ya digər klient kodu ilə birlikdə işlətməyə icazə verir. -### Replacing String-Based Rendering with React {#replacing-string-based-rendering-with-react} +### Mətn ilə Render Etməni React ilə Əvəz Etmək {#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. +Köhnə veb applikasiyalarda çox işlədilən həllərdən biri, DOM-un hissələrini mətn ilə təsvir edib DOM-a göstərilən formada əlavə etməkdir: `$el.html(htmlString)`. Bu formalı kodlar, React təqdim etmək üçün ən yaxşı nöqtələrdir. Mətn ilə render etmələri React komponentlərinə çevirin. -So the following jQuery implementation... +Aşağıdaki jQuery tətbiqi... ```js -$('#container').html(''); +$('#container').html(''); $('#btn').click(function() { - alert('Hello!'); + alert('Salam!'); }); ``` -...could be rewritten using a React component: +...React komponenti kimi yazıla bilər: ```js function Button() { - return ; + return ; } ReactDOM.render( @@ -221,22 +221,22 @@ ReactDOM.render( document.getElementById('container'), function() { $('#btn').click(function() { - alert('Hello!'); + alert('Salam!'); }); } ); ``` -From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `; + return ; } function HelloButton() { function handleClick() { - alert('Hello!'); + alert('Salam!'); } return