REACT
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 uncontrolled component for simplicity. First, we will create an empty component with a
render()method where we return<select>wrapped in a<div>.
Notice how we wrapped
<select>in an extra<div>. This is necessary because Chosen will append another DOM element right after the<select>node we passed to it. However, as far as React is concerned,<div>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
<select>node incomponentDidMount, and tear it down incomponentWillUnmount:
Note that React assigns no special meaning to the
this.elfield. It only works because we have previously assigned this field from arefin therender()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
changeevent on the<select>managed by Chosen. We won't passthis.props.onChangedirectly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare ahandleChange()method that callsthis.props.onChange, and subscribe it to the jQuerychangeevent.
Finally, there is one more thing left to do. In React, props can change over time. For example, the
<Chosen>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 kontrolsüz bir bileşen olarak uygulayacağız. İlk olarak, <div> içerisinde sarılı olan <select> 'i döndürdüğümüz bir render() yöntemiyle boş bir bileşen oluşturacağız.
<select>'i ekstra bir <div> içerisinde nasıl sardığımıza dikkat edin. Bu gereklidir çünkü Chosen, başka bir DOM öğesini ona aktardığımız <select> ağının hemen ardında ekleyecektir. Bununla birlikte, React'a gelince, <div> 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. componentDidMount içindeki <select> ağının başvurusuyla Chosen'ı başlatmalı ve componentWillUnmount'da yıkmalıyız.
React'in this.el alanına özel bir anlam atamadığına dikkat edin. Öncesinde bu alanı render() metodundaki bir ref'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 <select>'teki jQuery change etkinliğine katılacağız. Bileşenin kirişleri zamanla değişebileceğinden ve bu olay işleyicilerini de kapsadığından, this.props.onChange'i direkt olarak Chosen'a geçirmeyeceğiz. Bunun yerine, this.props.onChange'i çağıran bir handleChange() metodu beyan edeceğiz ve jQuery change 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 <Chosen> 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
Translation Part 2
Translation Part 3
Translation Part 4
Translation Part 5
Translation Part 6
Translation Part 7
Translation Part 8
Translation Part 9 ==> (You're here!)
Translation Part 10
Translation Part 11
Translation Part 12
Translation Part 13
Translation Part 14
Translation Part 15
Translation Part 16
Translation Part 17
Translation Part 18
Proof Link
My Crowdin Profile
React - Crowdin
React - Github
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @sym I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x