<h3><a href="https://reactjs.org/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">REACT
<p dir="auto">Hello friends,<br />
I have started translating another great section of React, which is a JavaScrript library. In this contribution, I translated 582 words in order to begin. I managed to translate the project's <strong>Implementation Nodes section from 33% to 45%. As a future programmer, I will keep translating more for both contributing as much as I can and being aware of these kinds of libraries.
<p dir="auto">Let me first start introducing what this "implementation notes" section is.
<p dir="auto">This section is a collection of implementation notes for the <code>stack reconciler.
<blockquote>
<p dir="auto">It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read <a href="/react/contributing/codebase-overview.html">the codebase overview first. It also assumes an understanding of the <a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">differences between React components, their instances, and elements. The stack reconciler is powering all the React production code today.
<h3><strong>Here is the translation:
<p dir="auto"><strong>React Home Page in Crowdin:<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732198/lhpxnagt8fhamuytivrb.png" alt="2017-12-31 (4).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732198/lhpxnagt8fhamuytivrb.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732198/lhpxnagt8fhamuytivrb.png 2x" />
<p dir="auto"><strong>Before:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732283/i62umlg2ucx0f2baro1g.png" alt="2017-12-31 (1).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732283/i62umlg2ucx0f2baro1g.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732283/i62umlg2ucx0f2baro1g.png 2x" />
<p dir="auto"><strong>During the Translation:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732403/lhln5v6rvf0nwcanhsnu.png" alt="2017-12-31 (7).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732403/lhln5v6rvf0nwcanhsnu.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732403/lhln5v6rvf0nwcanhsnu.png 2x" />
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732432/njonge4ogbe03x1o2hv9.png" alt="2017-12-31 (2).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732432/njonge4ogbe03x1o2hv9.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732432/njonge4ogbe03x1o2hv9.png 2x" />
<p dir="auto"><strong>After:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732513/recacjpplz2e5lgfywuh.png" alt="2017-12-31 (8).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732513/recacjpplz2e5lgfywuh.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732513/recacjpplz2e5lgfywuh.png 2x" />
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732537/ytspfsjpidjnhrbqyvtq.png" alt="2017-12-31 (5).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732537/ytspfsjpidjnhrbqyvtq.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732537/ytspfsjpidjnhrbqyvtq.png 2x" />
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732609/flfzvwcu9rx8qyhzmkep.png" alt="2017-12-31 (6).png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732609/flfzvwcu9rx8qyhzmkep.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1514732609/flfzvwcu9rx8qyhzmkep.png 2x" />
<hr />
<p dir="auto"><strong>EN:
<blockquote>
<p dir="auto">Top-Level Updates<br />
Now that both <code>CompositeComponent and <code>DOMComponent implement the <code>receive(nextElement) method, we can change the top-level <code>mountTree() function to use it when the element <code>type is the same as it was the last time:<br />
...<br />
function mountTree(element, containerNode) {<br />
// Check for an existing tree<br />
if (containerNode.firstChild) {<br />
var prevNode = containerNode.firstChild;<br />
var prevRootComponent = prevNode._internalInstance;<br />
var prevElement = prevRootComponent.currentElement;
<blockquote>
<p dir="auto">// If we can, reuse the existing root component<br />
if (prevElement.type === element.type) {<br />
prevRootComponent.receive(element);<br />
return;}
<blockquote>
<p dir="auto">// Otherwise, unmount the existing tree<br />
unmountTree(containerNode);}<br />
...<br />
As the last step, we execute the DOM operations. Again, the real reconciler code is more complex because it also handles moves. We can only update the instance if its element's type matches. If we can't update an existing instance, we have to unmount it and mount a new one instead of it. If we can update an existing internal instance, just let it receive the next element and handle its own update.
<hr />
<p dir="auto"><strong>TR:<br />
Üst Düzey Güncellemeler<br />
Artık hem <code>CompositeComponent hem de <code>DOMComponent bu <code>receive(nextElement) metodunu uygular. <code>type elemanı tıpkı eskisi gibi olduğunda üst düzey <code>mountTree() fonksiyonunu değiştirebiliriz:<br />
...
<blockquote>
<p dir="auto">function mountTree(element, containerNode) {<br />
// Mevcut bir ağacı kontrol et<br />
if (containerNode.firstChild) {<br />
var prevNode = containerNode.firstChild;<br />
var prevRootComponent = prevNode._internalInstance;<br />
var prevElement = prevRootComponent.currentElement;
<blockquote>
<p dir="auto">// Yapabilirsek, mevcut kök bileşenini yeniden kullanın.<br />
if (prevElement.type === element.type) {<br />
prevRootComponent.receive(element);<br />
return;}
<blockquote>
<p dir="auto">//Aksi takdirde mevcut ağacın bağlantısını kaldırın<br />
unmountTree(containerNode);}
<p dir="auto">...<br />
Son adım olarak, DOM işlemlerini yürütüyoruz. Yine, gerçek arabulucu kod, hareketleri de işlediğinden daha karmaşıktır. Örneği sadece öğesinin türü eşleşiyorsa güncelleyebiliriz. Mevcut bir örneği güncelleyemezsek, onu kaldırmamız ve yeni bir tanesini oluşturmamız gerekir. Mevcut bir dahili numuneyi güncellersek bir sonraki öğeyi almasına ve kendi güncellemesini ele almasına izin verin.
<hr />
<p dir="auto"><a href="https://utopian.io/utopian-io/@sym/translation-of-react-from-en-to-tr-context-0-to-100-768-words" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 1<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-from-en-to-tr-forms-0-to-100-730-more-words-1547-words-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 2<br />
<a href="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" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 3<br />
<a href="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" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 4<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-0-to-100-511-more-words-3284-words-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 5<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-rde-0-to-100-710-more-words-4026-words-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 6<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-rrd-0-to-100-606-more-words-4632-words-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 7<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-0-to-26-510-more-words-5162-words-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 8<br />
<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" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 9<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-iwol-56-to-84-540-words-translated-6486-words-translated-in-total" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 10<br />
<a href="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" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 11<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-in-33-to-45-582-words-translated-part12" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 12 ==> (You're here!)<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-uc-0-to-100-twp-1-to-100-515-words-translated-part13" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 13<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-portals-0-to-100-577-words-translated-part14" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 14<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-cru-0-to-100-545-words-translated-part15" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 15<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-cru9-0-to-100-551-words-translated-part16" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 16<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-100-523-words-translated-part17" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 17<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-0-to-100-534-words-translated-part18" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 18<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-2-parts-0-to-100-534-words-translated-part18" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 18<br />
<a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-community-round-up-8-0-to-51-562-words-translated-part19" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Translation Part 19
<hr />
<p dir="auto"><a href="https://crowdin.com/project/react/tr/activity" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Proof Link<br />
<a href="https://crowdin.com/profile/SymCors" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">My Crowdin Profile<br />
<a href="https://crowdin.com/project/react" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">React - Crowdin<br />
<a href="https://github.com/facebook/react" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">React - Github
<p dir="auto"><br /><hr /><em>Posted on <a href="https://utopian.io/utopian-io/@sym/translation-of-react-en-to-tr-in-33-to-45-582-words-translated-part12" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io - Rewarding Open Source Contributors<hr /><p>
Woow 12 part :O What a hardworker man
I will keep translating more. ;)
Your contribution cannot be approved because it does not follow the Utopian Rules.
You can contact us on Discord.
[utopian-moderator]