From d9802dd10f44f35188c97c29dbad343427fbda59 Mon Sep 17 00:00:00 2001 From: fatmabadri Date: Sun, 7 Mar 2021 11:27:18 -0800 Subject: [PATCH 01/10] start to translate with the introduction --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..e764f2ef9 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -4,7 +4,7 @@ title: Integrating with Other Libraries 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, herhangi bir web uygulamasında kullanılabilir. Diğer uygulamalara yerleştirilebilir ve biraz özenle React'e başka uygulamalar da yerleştirilebilir. Bu rehber, [jQuery](https://jquery.com/) ve [Backbone](https://backbonejs.org/) ile bütünleşmeye odaklanarak çok yaygın kullanım örneklerinin bazılarını inceleyecek, ancak aynı fikirler, bileşenleri varolan herhangi bir kodla bütünleştirmek için de uygulanabilir. ## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} From 766fa625dee20d03bde13344abd1a6b89067dab1 Mon Sep 17 00:00:00 2001 From: fatmabadri Date: Sun, 7 Mar 2021 11:35:16 -0800 Subject: [PATCH 02/10] how-to-approach-the-problem --- .../docs/integrating-with-other-libraries.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index e764f2ef9..03f3bb2cb 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -6,21 +6,21 @@ permalink: docs/integrating-with-other-libraries.html React, herhangi bir web uygulamasında kullanılabilir. Diğer uygulamalara yerleştirilebilir ve biraz özenle React'e başka uygulamalar da yerleştirilebilir. Bu rehber, [jQuery](https://jquery.com/) ve [Backbone](https://backbonejs.org/) ile bütünleşmeye odaklanarak çok yaygın kullanım örneklerinin bazılarını inceleyecek, ancak aynı fikirler, bileşenleri varolan herhangi bir kodla bütünleştirmek için de uygulanabilir. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## DOM Manipülasyon Eklentileri ile Bütünleşmek {#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, React dışında DOM'a yapılan değişikliklerin farkında değildir. Güncellemeleri kendi iç temsiline göre belirler, ve eğer aynı DOM düğümleri başka bir kütüphane tarafından değiştirilmişse, React şaşırır ve bunu kurtarmanın yolu yoktur. -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. +Bu demek değildir ki, o imkansızdır veya DOM'u etkileyen diğer yollarla React'i birleştirmek gerekli olarak zor olsa bile, her birinin ne yaptığını dikkate almanız yeterlidir. -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 `
`. +Çakışmaları önlemenin en kolay yolu, React bileşeninin güncellenmesini önlemektir. Bunu, boş bir `
` gibi React'in güncellemek için bir nedeni olmayan öğelerini oluşturarak yapabilirsiniz. -### How to Approach the Problem {#how-to-approach-the-problem} +### Soruna Nasıl Yaklaşılmalı {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Bunu göstermek için, genel bir jQuery eklentisi için bir sarmalayıcı çizelim. -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. +Kök DOM öğesine bir [ref](/docs/refs-and-the-dom.html) ekleyeceğiz. `componentDidMount` içinde, jQuery eklentisine iletebilmemiz için ona bir referans alacağız. -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: +Monte edildikten sonra, React'in DOM'a dokunmasını önlemek icin, `render()` metodundan boş bir `
` döndüreceğiz. `
` öğesinin herhangi bir özelliği veya alt öğesi yoktur, bu yüzden React'in onu güncellemek için bir nedeni yoktur, DOM'un bu bölümünü yönetmek için jQuery eklentisi serbest bırakılır: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,7 +39,7 @@ 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. +Dikkate alın ki, biz hem `componentDidMount` hem de `componentWillUnmount` [yaşam döngüsü metotları](/docs/react-component.html#the-component-lifecycle)'nı tanımladık. Birçok jQuery eklentisi, olay dinleyicilerini DOM'a ekler, bu nedenle onları `componentWillUnmount`'tan ayırmak önemlidir. Eğer eklenti düzeltme için bir metot sağlamıyorsa, muhtemelen bellek sızıntılarını önlemek için eklentinin kaydettiği herhangi bir olay dinleyicisini kaldırmayı hatırlayarak, kendi önleminizi almak zorunda olacaksınız. ### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} From 53f6e1473bca56cae45e7ebc068b2878e0b0812c Mon Sep 17 00:00:00 2001 From: fatmabadri Date: Sun, 7 Mar 2021 11:46:36 -0800 Subject: [PATCH 03/10] transalate integrating with jquery chosen library --- .../docs/integrating-with-other-libraries.md | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 03f3bb2cb..f9e026b21 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -41,19 +41,19 @@ class SomePlugin extends React.Component { Dikkate alın ki, biz hem `componentDidMount` hem de `componentWillUnmount` [yaşam döngüsü metotları](/docs/react-component.html#the-component-lifecycle)'nı tanımladık. Birçok jQuery eklentisi, olay dinleyicilerini DOM'a ekler, bu nedenle onları `componentWillUnmount`'tan ayırmak önemlidir. Eğer eklenti düzeltme için bir metot sağlamıyorsa, muhtemelen bellek sızıntılarını önlemek için eklentinin kaydettiği herhangi bir olay dinleyicisini kaldırmayı hatırlayarak, kendi önleminizi almak zorunda olacaksınız. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### jQuery Chosen Eklentisi ile Bütünleşmek {#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 `` girdilerini genişleten [Chosen](https://harvesthq.github.io/chosen/) eklentisi için küçük bir sarmalayıcı yazalım. ->**Note:** +>**Not:** > ->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ı demek, React uygulamaları için en iyi yaklaşım olduğu anlamına gelmez. Yapabildiğiniz zaman, sizi React bileşenlerini kullanmanız için cesaretlendiriyoruz. React uygulamalarında, React bileşenlerini yeniden kullanmak daha kolaydır, ve sıklıkla davranışları ve görünümleri üzerinde daha fazla kontrol sağlar. -First, let's look at what Chosen does to the DOM. +Öncelikle, `Chosen`'ın DOM'a ne yaptığına bakalım. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Eğer bunu bir ``'ten sonra, kendi görsel temsili ile ayrı bir DOM düğümü ekler. Ardından, değişiklikleri bize bildirmek için jQuery olaylarını tetikler. -Let's say that this is the API we're striving for with our `` wrapper React component: +Diyelim ki, bu `` sarmalayıcısı, React bileşenimizle uğraştığımız API'dır: ```js function Example() { @@ -67,9 +67,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Basit olması için onu [kontrolsüz bileşen](/docs/uncontrolled-components.html) olarak uygulayacağız. -First, we will create an empty component with a `render()` method where we return ``'i döndürdüğümüz yerde, `render()` metoduyla boş bir bileşen oluşturacağız: ```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. +Fazladan bir `
` içinde `` düğümünün hemen arkasına başka bir DOM öğesi ekleyecektir. Ancak, React söz konusu olduğunda, `
`'in her zaman yalnızca tek bir alt öğesi vardır. Bu, React güncellemelerinin, Chosen tarafından eklenmiş fazladan DOM düğümüyle çakışmamasını sağlama şeklimizdir. Önemlidir ki, eğer DOM'u React akışının dışında değiştirirseniz, React'in bu DOM düğümlerine dokunmak için bir nedeni olmadığından emin olmalısınız. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` düğümüne ref ile Chosen'i başlatmamız ve `componentWillUnmount`'da parçalamamız gerek: ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**CodePen'de Deneyin**](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: +Dikkat edin ki, React `this.el` alanına özel bir anlam atamaz. O sadece, öncesinde bu alana `render()` metodundaki bir `ref`'den atama yapılmış olduğunda çalışır: ```js ` managed by Chosen. +Bu, bileşenimizin oluşturulması için yeterlidir, ama değer değişiklikleri hakkında da bilgilendirilmek istiyoruz. Bunu yapmak için, Chosen tarafından yönetilen ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Chosen'in dökümantasyonu, orijinal DOM öğesine yapılan değişiklikler hakkında, jQuery `trigger ()` API'ını kullanabileceğimizi önerir. React'in `` children managed by React change. +Bu şekilde Chosen, React tarafından yönetilen `` girdilerini genişlete >**Not:** > ->Bunun mümkün olması demek, React uygulamaları için en iyi yaklaşım olduğu anlamına gelmez. Yapabildiğiniz zaman, sizi React bileşenlerini kullanmanız için cesaretlendiriyoruz. React uygulamalarında, React bileşenlerini yeniden kullanmak daha kolaydır, ve sıklıkla davranışları ve görünümleri üzerinde daha fazla kontrol sağlar. +>Bunun mümkün olması demek, React uygulamaları için en iyi yaklaşım olduğu anlamına gelmez. Mümkün olduğunda React bileşenlerini kullanmanızı öneririz. React uygulamalarında, React bileşenlerini yeniden kullanmak daha kolaydır, ve genellikle davranışları ve görünümleri üzerinde daha fazla kontrol sağlar. Öncelikle, `Chosen`'ın DOM'a ne yaptığına bakalım. @@ -135,7 +135,7 @@ handleChange(e) { Son olarak, yapılması gereken bir şey daha var. React'te, props zaman içinde değişir. Örneğin, ana bileşenin durumu değişirse, `` bileşeni, farklı alt öğeler alabilir. Bu, React'in DOM'u bizim için yönetmesine izin vermediğimizden, bütünleşme noktalarında, prop güncellemelerine yanıt olarak DOM'u manuel olarak güncellememizin önemli olduğu anlamına gelir. -Chosen'in dökümantasyonu, orijinal DOM öğesine yapılan değişiklikler hakkında, jQuery `trigger ()` API'ını kullanabileceğimizi önerir. React'in `` içindeki `this.props.children`'i güncellemesine izin vereceğiz, ancak Chosen'ı alt öğeler listesindeki değişiklikler hakkında bilgilendiren bir `componentDidUpdate()`'e yaşam döngüsü yöntemini de ekleyeceğiz: ```js{2,3} componentDidUpdate(prevProps) { @@ -196,7 +196,7 @@ React, başlangıçta genellikle DOM'a tek bir kök React bileşeni yüklemek i Aslında, Facebook'ta React tam olarak böyle kullanılır. Bu, uygulamaları React'te parça parça yazmamızı sağlar, ve bunları mevcut sunucu tarafından oluşturulan şablonlarımız ve diğer istemci-taraf (client-side) kod ile birleştirir. -### String-Tabanlı Render'in React ile Yer Değiştirmesi {#replacing-string-based-rendering-with-react} +### String-Tabanlı Render'i React ile Değiştirme {#replacing-string-based-rendering-with-react} Eski web uygulamalarındaki yaygın bir örnek, DOM parçalarını bir string olarak tanımlamak ve DOM'a şu şekilde eklemektir: `$el.html(htmlString)`. Bir kod tabanındaki bu noktalar, React'i tanıtmak için mükemmeldir. Sadece string tabanlı oluşturmayı, bir React bileşeni olarak yeniden yazın. @@ -285,7 +285,7 @@ Bir bileşen bir React ağacının *içinden* kaldırıldığında, temizleme ot Genel olarak, [React state](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/), veya [Redux](https://redux.js.org/) gibi tek yönlü veri akışının kullanılması tavsiye edilirken, React bileşenleri, diğer çatı ve kütüphanelerden bir model katmanı kullanabilir. -### React Bileşenlerinde Backbone MModellerini Kullanmak{#using-backbone-models-in-react-components} +### React Bileşenlerinde Backbone Modellerini Kullanmak{#using-backbone-models-in-react-components} Bir React bileşeninden [Backbone](https://backbonejs.org/) modellerini ve koleksiyonlarını kullanmanın en basit yolu, çeşitli değişim olaylarını dinlemek ve manuel olarak bir güncellemeyi zorlamaktır. @@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) { } ``` -Bunun nasıl kullanıldığını göstermek için, Backbone modeline bir `NameInput` React bileşeni bağlayacağız, ve giriş değiştiğinde "firstName" özelliğini güncelleyceğiz: +Bunun nasıl kullanıldığını göstermek için, Backbone modeline bir `NameInput` React bileşeni bağlayacağız, ve giriş değiştiğinde "firstName" özelliğini güncelleyeceğiz: ```js{4,6,11,15,19-21} function NameInput(props) { From 56c9a0cd5ff6cbf81bd5864407c9b193d3270ab4 Mon Sep 17 00:00:00 2001 From: fatmabadri <10557131+fatmabadri@users.noreply.github.com> Date: Sun, 14 Mar 2021 11:05:35 -0700 Subject: [PATCH 10/10] Update integrating-with-other-libraries.md make minor change in the eleventh line --- content/docs/integrating-with-other-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index fd4ca7af5..517b43777 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -8,7 +8,7 @@ React, herhangi bir web uygulamasında kullanılabilir. Diğer uygulamalara yerl ## DOM Manipülasyon Eklentileri ile Bütünleşmek {#integrating-with-dom-manipulation-plugins} -React, React dışında DOM'a yapılan değişikliklerin farkında değildir. Güncellemeleri kendi iç temsiline göre belirler, ve eğer aynı DOM düğümleri başka bir kütüphane tarafından değiştirilmişse, React şaşırır ve bunu kurtarmanın yolu yoktur. +React, React dışında DOM'a yapılan değişikliklerin farkında değildir. Güncellemeleri kendi iç temsiline göre belirler, ve eğer aynı DOM düğümleri başka bir kütüphane tarafından değiştirilmişse, React'in kafası karışır ve bunu kurtarmanın yolu yoktur. Bu, React'i DOM'u değistirmenin diğer yollarıyla birlikte kullanmanın imkansız veya zor olduğu anlamına gelmez. Sadece hangisinin ne yaptığına dikkat etmeniz gerekir.