From 85a06fed4ce997285c38fe92b3e1df1cc90f0854 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Tue, 3 Sep 2019 21:03:34 +0400 Subject: [PATCH 1/3] Translate until "Translate with Other View Libraries" --- .../docs/integrating-with-other-libraries.md | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..b1768ca5e 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ənən ssenarilərə baxacağıq. Bu sənəddə [jQuery](https://jquery.com/) və [Backbone](https://backbonejs.org/) kitabxanalarına inteqrasiyaya fokuslandığımıza baxmayaraq göstərilən 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. +React-in DOM-dan kənarda baş verən dəyişikliklərdən 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ə bərpa ola 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. +Amma bu o demək deyil ki, React-i DOM-u təsir edən digər həllər ilə birləşdirmək mümkün deyil və ya çətindir. Sadəcə hər həəlin nə etdiyi haqda zehinli olmalısınız. -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 `
`. +Ziddiyətlərin olmaması üçün ən asan yol React komponentinin yeniləməsinin qarşısını almaqdır. Siz buna React-in yeniləməyə səbəbi olmayan elementlər (məsələn boş `
`) render edərək nail ola 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şacağıq. `componentDidMount`-da 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 heç bir parametri 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`-dan ayırmaq lazımdır. Əgər plagin temizlik üçü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. +>Bunun 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əyini 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-ın DOM-un üzərində nə etdiyinə baxaq. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Əgər siz 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 necə ə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. +Sonda, biz bir məsələnidə nəzərə almalıyıq. React-də proplar zaman ilə dəyişə bilərlər. Məsələn, valideyn komponentin vəziyyəti dəyişərsə `` komponenti fərqli uşaqlar qəbul edə bilər. Bu deməkdir ki, 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ənməsinə icazə verməyimizdən əlavə `componentDidUpdate()` lifecycle funksiyası əlavə edib 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,7 +186,7 @@ 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} From abd772656b5795cdffbf2d1129074733b70eed72 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 4 Sep 2019 16:18:40 +0400 Subject: [PATCH 2/3] Translate Integrating with Other Libraries --- .../docs/integrating-with-other-libraries.md | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index b1768ca5e..d4f53f985 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -188,32 +188,32 @@ class Chosen extends React.Component { [**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ənir. 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 DOM-un hissələrini mətn ilə təsvir edib DOM-a aşağıdaki formada əlavə etmək çox işlədilən həllərdən biridir: `$el.html(htmlString)`. React təqdim etmək üçün ən yaxşı nöqtələr bu formalı kodlardır. 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