Translation of React - EN to TR - (IWOL - 26% to 56% #Stage2) - 552 Words Translated #Part9
utopian-io·@sym·
0.000 HBDTranslation of React - EN to TR - (IWOL - 26% to 56% #Stage2) - 552 Words Translated #Part9
### [REACT](https://reactjs.org/)
Hello my friends,
As we are getting closer to the end of this large section of React, I have already started feeling excited to be able to increase the contribution capaticy of mine. I, hereby, show my another contribution in translating the language in React to Turkish, I translated roughly 500 words again for finishing my task. I translated the project's **Integrating With Other Libraries** section from 26% to 56%.
What was a library again?
As I explained in the previous translation's post:
>A collection of files. In programming, a library is a collection of precompiled routines that a program can use. The routines, sometimes called modules, are stored in object format. Libraries are particularly useful for storing frequently used routines because you do not need to explicitly link them to every program that uses them. The linker automatically looks in libraries for routines that it does not find elsewhere. In MS-Windows environments, library files have a .DLL extension.
**NOTE:** In very simple terms a library is a file that consists of some useful code. When you are creating some big application, it's always good much code inside libraries so you can reuse it later.
**Here is the translation.**
### **Before.**
### **While Translating.**
...
### **After.**
...
...
---
**EN:**
>We will implement it as an <a href="/react/docs/uncontrolled-components.html">uncontrolled component</a> for simplicity. First, we will create an empty component with a <code>render()</code> method where we return <code><select></code> wrapped in a <code><div></code>.
>Notice how we wrapped <code><select></code> in an extra <code><div></code>. This is necessary because Chosen will append another DOM element right after the <code><select></code> node we passed to it. However, as far as React is concerned, <code><div></code> 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.
>Next, we will implement the lifecycle hooks. We need to initialize Chosen with the ref to the <code><select></code> node in <code>componentDidMount</code>, and tear it down in <code>componentWillUnmount</code>:
>Note that React assigns no special meaning to the <code>this.el</code> field. It only works because we have previously assigned this field from a <code>ref</code> in the <code>render()</code> method.
><select className="Chosen-select" ref={el => 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 <code>change</code> event on the <code><select></code> managed by Chosen. We won't pass <code>this.props.onChange</code> directly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare a <code>handleChange()</code> method that calls <code>this.props.onChange</code>, and subscribe it to the jQuery <code>change</code> event.
>Finally, there is one more thing left to do. In React, props can change over time. For example, the <code><Chosen></code> 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.
---
**TR:**
Basitliği sağlamak için onu <a href="/react/docs/uncontrolled-components.html">kontrolsüz bir bileşen</a> olarak uygulayacağız. İlk olarak, <code><div></code> içerisinde sarılı olan <code><select></code> 'i döndürdüğümüz bir <code>render()</code> yöntemiyle boş bir bileşen oluşturacağız.
<code><select></code>'i ekstra bir <code><div></code> içerisinde nasıl sardığımıza dikkat edin. Bu gereklidir çünkü Chosen, başka bir DOM öğesini ona aktardığımız <code><select></code> ağının hemen ardında ekleyecektir. Bununla birlikte, React'a gelince, <code><div></code> her zaman yalnızca tek bir alt elemana sahiptir. React güncellemelerinin Chosen tarafından eklenen ek DOM ağıyla çakışmamasını sağlamak için böyle yapıyoruz. DOM'u React akışının dışında değiştirirseniz, React'in bu DOM ağlarına dokunması için bir neden taşımadığından emin olmanız önemlidir.
Sonra, yaşam döngüsü kancalarını uygulayacağız. <code>componentDidMount</code> içindeki <code><select></code> ağının başvurusuyla Chosen'ı başlatmalı ve <code>componentWillUnmount</code>'da yıkmalıyız.
React'in <code>this.el</code> alanına özel bir anlam atamadığına dikkat edin. Öncesinde bu alanı <code>render()</code> metodundaki bir <code>ref</code>'ten atadığımızdan dolayı sadece çalışır:
<select className="Chosen-select" ref={el => this.el = el}>
Bu, bileşenimizi işlemek için yeterlidir, ancak değer değişiklikleri konusunda da bilgilendirilmek istiyoruz. Bunu yapmak için, Chosen tarafından yönetilen <code><select></code>'teki jQuery <code>change</code> etkinliğine katılacağız. Bileşenin kirişleri zamanla değişebileceğinden ve bu olay işleyicilerini de kapsadığından, <code>this.props.onChange</code>'i direkt olarak Chosen'a geçirmeyeceğiz. Bunun yerine, <code>this.props.onChange</code>'i çağıran bir <code>handleChange()</code> metodu beyan edeceğiz ve jQuery <code>change</code> olayına katılacağız.
Son olarak, yapılacak bir şey daha var. React'ta kirişler zamanla değişebilir. Örneğin, üst öğe bileşenlerinin durumu değişirse <code><Chosen></code> bileşeni farklı alt elemanlar alabilir. Bu, Entegrasyon noktalarında Reakt'in DOM'u bizim için yönetmesine daha fazla izin vermediğimizden, kiriş güncellemelerine karşılık olarak DOM'u manuel bir şekilde güncellemenin önemli olduğu anlamına gelmektedir.
---
[Translation Part 1](https://utopian.io/utopian-io/@sym/translation-of-react-from-en-to-tr-context-0-to-100-768-words)
[Translation Part 2](https://utopian.io/utopian-io/@sym/translation-of-react-from-en-to-tr-forms-0-to-100-730-more-words-1547-words-in-total)
[Translation Part 3](https://utopian.io/utopian-io/@sym/translation-of-react-from-en-to-tr-react-without-es6-0-to-100-527-more-words-2125-words-in-total)
[Translation Part 4](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-how-to-contribute-0-to-100-630-more-words-2756-words-in-total)
[Translation Part 5](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-0-to-100-511-more-words-3284-words-in-total)
[Translation Part 6](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-rde-0-to-100-710-more-words-4026-words-in-total)
[Translation Part 7](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-rrd-0-to-100-606-more-words-4632-words-in-total)
[Translation Part 8](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-0-to-26-510-more-words-5162-words-in-total)
[Translation Part 9](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-26-to-56-552-words-translated-5877-words-translated-in-total) ==> (You're here!)
[Translation Part 10](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-56-to-84-540-words-translated-6486-words-translated-in-total)
[Translation Part 11](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-84-to-100-wc-0-to-100-511-words-translated-7077-words-translated-in-total)
[Translation Part 12](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-in-33-to-45-582-words-translated-part12)
[Translation Part 13](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-uc-0-to-100-twp-1-to-100-515-words-translated-part13)
[Translation Part 14](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-portals-0-to-100-577-words-translated-part14)
[Translation Part 15](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-cru-0-to-100-545-words-translated-part15)
[Translation Part 16](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-cru9-0-to-100-551-words-translated-part16)
[Translation Part 17](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-100-523-words-translated-part17)
[Translation Part 18](https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-0-to-100-534-words-translated-part18)
---
[Proof Link](https://crowdin.com/project/react/tr/activity)
[My Crowdin Profile](https://crowdin.com/profile/SymCors)
[React - Crowdin](https://crowdin.com/project/react)
[React - Github](https://github.com/facebook/react)
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-26-to-56-552-words-translated-5877-words-translated-in-total">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>