# Translating 527 words of Facebook React
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1513971596/cgqm9jaxhlgg9m9ss5ww.png)
<center>[[Source]](https://res.cloudinary.com/hpiynhbhq/image/upload/v1513971596/cgqm9jaxhlgg9m9ss5ww.png)</center>
Today I finished translating implementation-notes.md from 55% to 66% total of 527 words.
![Capture_2017_12_23_03_41_47_826.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1513971715/tumtvpc4zxsmxjtk607a.png)
You may check my activity on this link: https://crowdin.com/project/react/fil/activity

- And here are the few Examples of my translation:
>// Hanapin ang lumang node dahil kinakailangan nitong mapalitan var prevNode = prevRenderedComponent.getHostNode(); // I-unmount ang lumang child ay i-mount ang bagong child prevRenderedComponent.unmount(); var nextRenderedComponent = instantiateComponent(nextRenderedElement); var nextNode = nextRenderedComponent.mount(); // palitana ng reperensya sa child this.renderedComponent = nextRenderedComponent; // Palitan ang lumang node ng bago // Tandaan: ito ay isang renderer-specific na code at // kung iisipin dapat itoy nasalabas ng CompositeComponent: prevNode.parentNode.replaceChild(nextNode, prevNode); } }	implementation-notes.md	02:38 PM
// Kung tayo ay nasa punto ng ito, kailangan nating i-unmount ang nakalipas na // na-mount ng komponent, I-mount ang isang bago, at pagpalitin ang kanilang mga node.	implementation-notes.md	02:35 PM
Halimbawa, ito ang mangyayari kapag ang komponent na na-render na ang isang <code>&lt;button /&gt;</code> ay nag render ng isang <code>&lt;input /&gt;</code>:	implementation-notes.md	02:34 PM
Sa halip, kailangan nating i-unmount ang umiiral ng panloob na instance and i-mount ang isang bagong nararapat para sa na-render na uri ng elemento.	implementation-notes.md	01:53 PM
Ang <code>&lt;button&gt;</code> ay hindi maaring "maging" isang <code>&lt;input&gt;</code>.	implementation-notes.md	01:52 PM
Gayunpaman, kung ang susunod na na-render na elemento ay may ibang <code>type</code> kesa sa naunang na render na elemento, hindi natin maaaring i-update ang panloob na instance.	implementation-notes.md	01:51 PM
if (prevRenderedElement.type === nextRenderedElement.type) { prevRenderedComponent.receive(nextRenderedElement); return; } // ...	implementation-notes.md	01:50 PM
// Kung ang pag-render ng uri ng elemento ay hindi nabago, // muling gamitin ang umiiral ng komponent ng instance at lumabas.	implementation-notes.md	01:50 PM
Halimbawa, kung ito ay nagbalik ng <code>&lt;Button color="red" /&gt;</code> ng unang beses, at ng <code>&lt;Button color="blue" /&gt;</code> ng ikalawang beses, maari lang nating sabihin sa kaukulang panloob na intance sa <code>receive()</code> sa susunod na elemento:	implementation-notes.md	01:49 PM
Susunod, maaari nating tingnan ang na-render na <code>type</code> ng elemento. Kung ang <code>type</code> ay hindi nabago simula ng huling pag-render, ang komponent sa ibaba ay maari ding ma update sa kanyang pwesto.	implementation-notes.md	01:47 PM
receive(nextElement) { var prevProps = this.currentElement.props; var publicInstance = this.publicInstance; var prevRenderedComponent = this.renderedComponent; var prevRenderedElement = prevRenderedComponent.currentElement; // I-update ang *sariling* elemento this.currentElement = nextElement; var type = nextElement.type; var nextProps = nextElement.props; // Alamin kung ano ang susunod na output ng render() var nextRenderedElement; if (isClass(type)) { // class ng komponent // Tawagin ang lifecycle kung kinakailangan if (publicInstance.componentWillUpdate) { publicInstance.componentWillUpdate(nextProps); } /...	implementation-notes.md	01:45 PM
At ating muling i-rerender ang komponent sa pamamagitan ng mga bagong prop, at makuha ang susunod na na-render na elemnto:	implementation-notes.md	01:42 PM
Kapag ang isang composite na komponent ay nakatanggap ng bagong elemnto, pinapagana namin ang <code>componentWillUpdate()</code> na lifecycle hook.	implementation-notes.md	12:55 PM
Ina-update ang Composite na mga Komponent	implementation-notes.md	12:35 PM
Ang parteng ito ay karaniwang inilalarawan bilang isang "virtual DOM diffing" kahit na ang talagang nangyayari ay lumalakad kame sa loob ng tree ng recursibo at hinahayaang ang mga panloob na instanse ay makatanggap ng update.	implementation-notes.md	12:35 PM
Ang trabaho nito ay gawin ang mga kinakailangan para madala ang komponent (at alin man sa mga children nito) sa pinaka bago na may deskripsyong ibinigay ng <code>nextElement</code>.	implementation-notes.md	12:33 PM
class CompositeComponent { // ... receive(nextElement) { // ... } } class DOMComponent { // ... receive(nextElement) { // ... } }	implementation-notes.md	12:32 PM
Bukod pa dito ang <code>mount()</code> at <code>unmount()</code>, parehong ang <code>DOMComponent</code> at <code>CompositeComponent</code> ay mag-iimplementa ng mga bagong metod na tinatawag na <code>receive(nextElement)</code>:	implementation-notes.md	12:32 PM
Aming ipaaabot ang kontrata ng panloob na instance sa isa pang paraan.	implementation-notes.md	12:31 PM
var rootEl = document.getElementById('root'); mountTree(&lt;App /&gt;, rootEl); // Dapat muling gamitin ang umiiral ng DOM: mountTree(&lt;App /&gt;, rootEl);	implementation-notes.md	12:30 PM
>Ang layunin ng reconcicler ay muling gamitin ang mga intance na posibleng ma maingatan ang DOM at ang estado nito:	implementation-notes.md	12:27 PM
Gayunpaman ang React ay hindi kapaki-pakinabang kung ang bawat prop ay babaguhin ang na-unmount at na-mount na buong tree.	implementation-notes.md	12:26 PM
Sa nakaraang seksyon, kami ay nagimplementa ng pag-unmount.	implementation-notes.md	12:25 PM


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@ruah/translating-527-words-of-facebook-react">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>