From 4176d7946fddf936354006504a85f9126125a764 Mon Sep 17 00:00:00 2001
From: Hilal <hilalarsa@gmail.com>
Date: Wed, 20 Feb 2019 02:42:20 +0700
Subject: [PATCH 1/5] Translate Glossary to Indonesian

---
 content/docs/reference-glossary.md | 100 +++++++++++++++--------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index 280869512..da7c8a21c 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -7,59 +7,60 @@ permalink: docs/glossary.html
 
 ---
 
-## Single-page Application {#single-page-application}
+## Aplikasi Single-page {#single-page-application}
 
-A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
+Aplikasi _Single-page_ adalah jenis aplikasi web yang memuat sebuah halaman HTML dan seluruh aset yang diperlukannya (seperti Javascript dan CSS) untuk dapat berjalan. Seluru interaksi yang terjadi pada halaman yang telah dimuat maupun halaman lainnya yang berhubungan, tidak memerlukan tambahan pengambilan data ke server, yang berarti halaman tidak perlu dimuat ulang.
 
-Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
+Aplikasi _Single-page_ tidak harus dibangun menggunakan React. React dapat digunakan untuk meningkatkan bagian-bagian tertentu dari halaman yang telah ada untuk meningkatkan interaktivitas halaman tersebut. Kode yang ditulis dalam React dapat berjalan dengan aman dengan jenis lainnnya yang di _render_ pada _server_, seperti PHP, atau _library_ lain yang ada di sisi _client_. Faktanya, dengan cara inilah Facebook menggunakan React.
 
 ## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc}
 
-These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions).
+Semua akronim diatas merujuk pada versi terbaru dari standar Spesifikasi bahasa ECMAScript, yang merupakan implementasi dari bahasa JavaScript Versi ES6 (dikenal juga sebagai ES2015), yang mencakup tambahan dari versi sebelumnya seperti : _Arrow Function_, kelas, _template literals_, deklarasi variabel dengan let dan const. Anda dapat mempelajarinya lebih dalam tiap versinya melalui [tautan ini](https://en.wikipedia.org/wiki/ECMAScript#Versions)
 
-## Compilers {#compilers}
+## Kompiler {#compilers}
 
-A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React.
+Sebuah kompiler JavaScript mengambil, dan mengubah kode JavaScript, dan mengembalikannya kedalam format yang berbeda. Kasus paling umum penggunaan compiler adalah saat sintaksis ES6 diubah untuk dapat dimengerti oleh peramban tipe lama. [Babel](https://babeljs.io/) adalah salah satu jenis kompiler yang sering digunakan dengan React.
 
-## Bundlers {#bundlers}
+## Bundler {#bundlers}
 
-Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/).
+Bundler menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, dan menggabungkannya menjadi beberapa file yang lebih optimal untuk dijalankan oleh peramban. Bundler yang sering digunakan React meliputi [Webpack](https://webpack.js.org/) dan [Browserify](http://browserify.org/)
 
-## Package Managers {#package-managers}
+## Manajer Paket {#package-managers}
 
-Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
+Manajer paket adalah alat yang digunakan untuk mengatur dan mengelola dependensi pada project Anda. [npm](https://www.npmjs.com/) dan [Yarn](http://yarnpkg.com/) adalah manajer paket yang paling sering digunakan pada aplikasi React dimana keduanya adalah klien yang memiliki registri paket npm yang sama.
 
 ## CDN {#cdn}
 
-CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. 
+CDN adalah singkatan dari Content Delivery Network. CDN menyediakan konten yang statis dan di-_cache_ dari jaringan server diseluruh dunia.
 
 ## JSX {#jsx}
 
-JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html).
+JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa _template_, namum memiliki kekuatan penuh atas bahasa JavaScript. JSX dijalankan menjadi format `React.createElement()` yang mengembalikan objek JavaScript baru berupa "Elemen React". Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat [dokumentasi JSX](/docs/introducing-jsx.html), atau mengenai JSX dengan lebih mendalam [di sini](https://reactjs.org/docs/introducing-jsx.html)
+
+Tidak seperti dalam HTML, React DOM menggunakan format camelCase untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
 
-React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript:
 
 ```js
 const name = 'Clementine';
 ReactDOM.render(
-  <h1 className="hello">My name is {name}!</h1>,
+  <h1 className="hello">Nama saya {name}!</h1>,
   document.getElementById('root')
 );
 ```  
 
-## [Elements](/docs/rendering-elements.html) {#elements}
+## [Elemen](/docs/rendering-elements.html) {#elements}
 
-React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable.
+React Elemen adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (immutable).
 
 ```js
-const element = <h1>Hello, world</h1>;
+const element = <h1>Hai, dunia</h1>;
 ```
 
-Typically, elements are not used directly, but get returned from components.
+Secara khusus, elemen tidak digunakan secara langsung, melainkan dikembalikan melalui komponen.
 
-## [Components](/docs/components-and-props.html) {#components}
+## [Komponen](/docs/components-and-props.html) {#components}
 
-React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
+Komponen React adalah bagian atau potongan kecil dari kode yang dapat digunakan kembali, yang mengembalikan elemen React untuk di-_render_ ke halaman. Versi paling sederhana dari komponen React adalah fungsi JavaScript yang mengembalikan elemen React :
 
 ```js
 function Welcome(props) {
@@ -67,7 +68,7 @@ function Welcome(props) {
 }
 ```
 
-Components can also be ES6 classes:
+Komponen juga dapat menggunakan kelas dengan format penulisan ES6:
 
 ```js
 class Welcome extends React.Component {
@@ -77,30 +78,31 @@ class Welcome extends React.Component {
 }
 ```
 
-Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`<Wrapper/>` **not** `<wrapper/>`). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. 
+Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan array, string, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), akan lebih baik jika bagian tersebut menggunakan Reusable Component. Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.
+
 
 ### [`props`](/docs/components-and-props.html) {#props}
 
-`props` are inputs to a React component. They are data passed down from a parent component to a child component.
+`props` adalah masukan dari komponen React. `props` adalah data yang dioper dari _parent component_ ke _child component_-nya.
 
-Remember that `props` are readonly. They should not be modified in any way:
+Perlu diingat bahwa `props` adalah _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:
 
 ```js
 // Wrong!
 props.number = 42;
 ```
 
-If you need to modify some value in response to user input or a network response, use `state` instead.
+Jika Anda perlu memodifikasi nilai sebagai respon dari masukan penguna, gunakan `state`.
 
 ### `props.children` {#propschildren}
 
-`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example:
+`props.children` tersedia di setiap komponen. Ia berisi konten yang terletak diantara _tag_ pembuka dan penutup dari sebuah komponen. Sebagai contoh:
 
 ```js
-<Welcome>Hello world!</Welcome>
+<Welcome>Hai dunia!</Welcome>
 ```
 
-The string `Hello world!` is available in `props.children` in the `Welcome` component:
+Teks `Hai dunia!` dapat diakses sebagai `props.children` di komponen `Welcome`:
 
 ```js
 function Welcome(props) {
@@ -108,7 +110,7 @@ function Welcome(props) {
 }
 ```
 
-For components defined as classes, use `this.props.children`:
+Untuk komponen yang menggunakan kelas, gunakan `this.props.children`:
 
 ```js
 class Welcome extends React.Component {
@@ -120,47 +122,49 @@ class Welcome extends React.Component {
 
 ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state}
 
-A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state.
+Sebuah komponen membutuhkan `state` saat sebuah data yang berhubungan dengannya berubah sewaktu-waktu. Sebagia contoh, sebuah komponen `Checkbox` dapat membutuhkan _state_ `isChecked`, dan sebuah komponen `NewsFeed` bisa jadi selalu membutuhkan _state_ `fetchedPost` terbaru.
 
-The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state.
+Perbedaan paling penting diantara `state` dan `props` adalah `props` dioper melalui _parent component_, sedangkan `state` diatur oleh komponen itu sendiri. Sebuah komponen tidak dapat mengubah `props`, tetapi dapat mengubah `state`. Untuk melakukannya, komponen tersebut harus memanggil fungsi `this.setState()`. Hanya komponen yang didefinisikan sebagai kelas yang dapat memiliki _state_.
 
-For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them.
+Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [lift it up](/docs/lifting-state-up.html), atau angkat nilainya ke arah pendahulunya yang terdekat, kemudian oper sebagai _props_ untuk kedua komponen tersebut.
 
-## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
+## [Metode Lifecycle](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
 
-Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM.
+Metode lifecycle adalah fungsionalitas khusus yang dijalankan selama fase tertentu dalam sebuah komponen. Terdapat beberapa metode yang tersedia saat komponen dibuat dan dimasukkan kedalam DOM ([mounting](/docs/react-component.html#mounting)), saat komponen diperbarui, dan saat komponen dilepas atau dihapus dari DOM.
 
  ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)
 
-React has two different approaches to dealing with form inputs. 
+React memiliki dua pendekatan berbeda untuk mengatur masukan formulir.
 
-An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
+Sebuah elemen masukan formulir yang nilainya diatur oleh React disebut sebagai *_controlled component*. Saat seorang pengguna memasukkan data kedalam _controlled component_, sebuah _event handler_ terpicu, dan kode Anda yang selanjutnya menentukan apakah masukan valid atau tidak (dengan cara merender ulang dengan nilai yang telah diperbarui). Jika Anda tidak merender ulang, maka nilai formulir tidak akan berubah.
 
-An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.
+Sebuah *uncontrolled component* bekerja seperti hal yang dilakukan elemen formulir diluar React. Disaat pengguna memasukkan data kedalam formulir (melalui kotak input, _dropdown_, dll) nilai yang telah diperbarui akan digunakan tanpa React perlu melakukan apapun. Bagaimanapun, hal ini berari Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.
 
-In most cases you should use controlled components.
+Dalam banyak kasus, Anda harus menggunakan _controlled components_.
 
 ## [Keys](/docs/lists-and-keys.html) {#keys}
 
-A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.
+Sebuah "key" adalah karakter spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk array. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. Keys harus diberikan pada elemen dalam sebuah array untuk memberikan identitas yang stabil pada elemen tersebut.
 
-Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component.
+Keys hanya perlu bersifat unik dengan elemen lainnya dalam array yag sama. Keys tidak perlu unik diseluruh aplikasi atau bahkan didalam komponen yang sama.
 
-Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`.
+Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui dirender ulang, sehingga React dapat mentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
 
 ## [Refs](/docs/refs-and-the-dom.html) {#refs}
 
-React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.
+React mendukung atribut spesial yang dapat dilampirkan di komponen apapun. Atribut `ref` dapat terdiri dari sebuah objek yang dibuat oleh [`React.createRef()` function](/docs/react-api.html#reactcreateref) atau oleh sebuah _callback function_, atau _string_ (di API _legacy_). Disaat `ref` adalah sebuah _callback function_, fungsi tersebut dapat menerima argumen berupa elemen DOM atau sebuah kelas (bergantung pada tipe elemen). Hal ini dapat memberikan Anda akses langsung pada elemen DOM atau komponen yang berhubungan.
 
-Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html).
+Gunakan refs dengan bijak. Jika anda merasa sering menggunakan refs untuk "melakukan suatu hal", pertimbangkan untuk lebih familier dengan [aliran data top-down](/docs/lifting-state-up.html).
 
-## [Events](/docs/handling-events.html) {#events}
+## [Event](/docs/handling-events.html) {#events}
 
 Handling events with React elements has some syntactic differences:
 
-* React event handlers are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+Menangani event dengan Elemen React memiliki perbedaan secara sintaksis:
+
+* _Event handler_ pada React ditulis menggunakan camelCase, bukan sebagaii huruf kecil.
+* Dengan JSX, Anda mengoper sebuah fungsi sebagai _event handler_, bukan sebagai string.
 
-## [Reconciliation](/docs/reconciliation.html) {#reconciliation}
+## [Rekonsiliasi](/docs/reconciliation.html) {#reconciliation}
 
-When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".
+Disaat sebuah _props_ atau _state_ dari sebuah komponen mengalami perubahan, React dapat memutuskan apakah hal tersebut memerlukan pembaruan DOM, dengan cara membandingkan elemen komponen yang dikembalikan dengan komponen yang telah dirender sebelumnya. Jika keduanya berbeda, React akan memperbaharui DOM. Proses ini disebut dengan istilah "rekonsiliasi".

From b7d7d68608f2ba96dd4ca9ba7f72fd7812f131fc Mon Sep 17 00:00:00 2001
From: Hilal <hilalarsa@gmail.com>
Date: Sun, 3 Mar 2019 23:03:49 +0700
Subject: [PATCH 2/5] Fix some translation, grammar, and typos error on
 Glossary

---
 content/docs/reference-glossary.md | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index da7c8a21c..99bf1e280 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -9,21 +9,21 @@ permalink: docs/glossary.html
 
 ## Aplikasi Single-page {#single-page-application}
 
-Aplikasi _Single-page_ adalah jenis aplikasi web yang memuat sebuah halaman HTML dan seluruh aset yang diperlukannya (seperti Javascript dan CSS) untuk dapat berjalan. Seluru interaksi yang terjadi pada halaman yang telah dimuat maupun halaman lainnya yang berhubungan, tidak memerlukan tambahan pengambilan data ke server, yang berarti halaman tidak perlu dimuat ulang.
+Aplikasi _Single-page_ adalah jenis aplikasi web yang memuat sebuah halaman HTML dan seluruh aset yang diperlukannya (seperti Javascript dan CSS) untuk dapat berjalan. Seluruh interaksi yang terjadi pada halaman yang telah dimuat maupun halaman lainnya yang berhubungan, tidak memerlukan tambahan pengambilan data ke server, yang berarti halaman tidak perlu dimuat ulang.
 
 Aplikasi _Single-page_ tidak harus dibangun menggunakan React. React dapat digunakan untuk meningkatkan bagian-bagian tertentu dari halaman yang telah ada untuk meningkatkan interaktivitas halaman tersebut. Kode yang ditulis dalam React dapat berjalan dengan aman dengan jenis lainnnya yang di _render_ pada _server_, seperti PHP, atau _library_ lain yang ada di sisi _client_. Faktanya, dengan cara inilah Facebook menggunakan React.
 
-## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc}
+## ES6, ES2015, ES2016, dsb {#es6-es2015-es2016-etc}
 
-Semua akronim diatas merujuk pada versi terbaru dari standar Spesifikasi bahasa ECMAScript, yang merupakan implementasi dari bahasa JavaScript Versi ES6 (dikenal juga sebagai ES2015), yang mencakup tambahan dari versi sebelumnya seperti : _Arrow Function_, kelas, _template literals_, deklarasi variabel dengan let dan const. Anda dapat mempelajarinya lebih dalam tiap versinya melalui [tautan ini](https://en.wikipedia.org/wiki/ECMAScript#Versions)
+Semua akronim diatas merujuk pada versi terbaru dari standar Spesifikasi bahasa ECMAScript, yang merupakan implementasi dari bahasa JavaScript Versi ES6 (dikenal juga sebagai ES2015), yang mencakup tambahan dari versi sebelumnya seperti : _Arrow Function_, kelas, _template literals_, deklarasi variabel dengan `let` dan `const`. Anda dapat mempelajarinya lebih dalam tiap versinya melalui [tautan ini](https://en.wikipedia.org/wiki/ECMAScript#Versions)
 
 ## Kompiler {#compilers}
 
-Sebuah kompiler JavaScript mengambil, dan mengubah kode JavaScript, dan mengembalikannya kedalam format yang berbeda. Kasus paling umum penggunaan compiler adalah saat sintaksis ES6 diubah untuk dapat dimengerti oleh peramban tipe lama. [Babel](https://babeljs.io/) adalah salah satu jenis kompiler yang sering digunakan dengan React.
+Sebuah kompiler JavaScript menerima kode JavaScript, mengubahnya, dan mengembalikannya kedalam format yang berbeda. Kasus paling umum penggunaan compiler adalah saat sintaksis ES6 diubah untuk dapat dimengerti oleh peramban tipe lama. [Babel](https://babeljs.io/) adalah salah satu jenis kompiler yang sering digunakan dengan React.
 
 ## Bundler {#bundlers}
 
-Bundler menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, dan menggabungkannya menjadi beberapa file yang lebih optimal untuk dijalankan oleh peramban. Bundler yang sering digunakan React meliputi [Webpack](https://webpack.js.org/) dan [Browserify](http://browserify.org/)
+_Bundler_ menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, dan menggabungkannya menjadi beberapa file yang lebih optimal untuk dijalankan oleh peramban. _Bundler_ yang sering digunakan React meliputi [Webpack](https://webpack.js.org/) dan [Browserify](http://browserify.org/)
 
 ## Manajer Paket {#package-managers}
 
@@ -37,7 +37,7 @@ CDN adalah singkatan dari Content Delivery Network. CDN menyediakan konten yang
 
 JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa _template_, namum memiliki kekuatan penuh atas bahasa JavaScript. JSX dijalankan menjadi format `React.createElement()` yang mengembalikan objek JavaScript baru berupa "Elemen React". Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat [dokumentasi JSX](/docs/introducing-jsx.html), atau mengenai JSX dengan lebih mendalam [di sini](https://reactjs.org/docs/introducing-jsx.html)
 
-Tidak seperti dalam HTML, React DOM menggunakan format camelCase untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
+Tidak seperti dalam HTML, React DOM menggunakan format _camelCase_ untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
 
 
 ```js
@@ -148,23 +148,21 @@ Sebuah "key" adalah karakter spesial yang perlu disertakan saat membuat kumpulan
 
 Keys hanya perlu bersifat unik dengan elemen lainnya dalam array yag sama. Keys tidak perlu unik diseluruh aplikasi atau bahkan didalam komponen yang sama.
 
-Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui dirender ulang, sehingga React dapat mentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
+Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui _di-render_ ulang, sehingga React dapat mentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
 
 ## [Refs](/docs/refs-and-the-dom.html) {#refs}
 
 React mendukung atribut spesial yang dapat dilampirkan di komponen apapun. Atribut `ref` dapat terdiri dari sebuah objek yang dibuat oleh [`React.createRef()` function](/docs/react-api.html#reactcreateref) atau oleh sebuah _callback function_, atau _string_ (di API _legacy_). Disaat `ref` adalah sebuah _callback function_, fungsi tersebut dapat menerima argumen berupa elemen DOM atau sebuah kelas (bergantung pada tipe elemen). Hal ini dapat memberikan Anda akses langsung pada elemen DOM atau komponen yang berhubungan.
 
-Gunakan refs dengan bijak. Jika anda merasa sering menggunakan refs untuk "melakukan suatu hal", pertimbangkan untuk lebih familier dengan [aliran data top-down](/docs/lifting-state-up.html).
+Gunakan refs-and dengan bijak. Jika anda merasa sering menggunakan refs untuk "melakukan suatu hal", pertimbangkan untuk lebih familier dengan [aliran data _top-down_](/docs/lifting-state-up.html).
 
 ## [Event](/docs/handling-events.html) {#events}
 
-Handling events with React elements has some syntactic differences:
+Menangani _event_ dengan Elemen React memiliki perbedaan secara sintaksis:
 
-Menangani event dengan Elemen React memiliki perbedaan secara sintaksis:
-
-* _Event handler_ pada React ditulis menggunakan camelCase, bukan sebagaii huruf kecil.
+* _Event handler_ pada React ditulis menggunakan camelCase, bukan sebagai huruf kecil.
 * Dengan JSX, Anda mengoper sebuah fungsi sebagai _event handler_, bukan sebagai string.
 
 ## [Rekonsiliasi](/docs/reconciliation.html) {#reconciliation}
 
-Disaat sebuah _props_ atau _state_ dari sebuah komponen mengalami perubahan, React dapat memutuskan apakah hal tersebut memerlukan pembaruan DOM, dengan cara membandingkan elemen komponen yang dikembalikan dengan komponen yang telah dirender sebelumnya. Jika keduanya berbeda, React akan memperbaharui DOM. Proses ini disebut dengan istilah "rekonsiliasi".
+Disaat sebuah _props_ atau _state_ dari sebuah komponen mengalami perubahan, React dapat memutuskan apakah hal tersebut memerlukan pembaruan DOM, dengan cara membandingkan elemen komponen yang dikembalikan dengan komponen yang telah _di-render_ sebelumnya. Jika keduanya berbeda, React akan memperbarui DOM. Proses ini disebut dengan istilah "rekonsiliasi".

From 1632b81160b28add3ac78f8e2de739d71d42d86a Mon Sep 17 00:00:00 2001
From: edgeprop <edgeprop@edgeprops-MacBook-Air.local>
Date: Wed, 6 Mar 2019 17:48:10 +0700
Subject: [PATCH 3/5] Fix some typo and grammar error

---
 content/docs/reference-glossary.md | 34 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index 99bf1e280..959e12051 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -27,17 +27,17 @@ _Bundler_ menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, da
 
 ## Manajer Paket {#package-managers}
 
-Manajer paket adalah alat yang digunakan untuk mengatur dan mengelola dependensi pada project Anda. [npm](https://www.npmjs.com/) dan [Yarn](http://yarnpkg.com/) adalah manajer paket yang paling sering digunakan pada aplikasi React dimana keduanya adalah klien yang memiliki registri paket npm yang sama.
+Manajer paket adalah alat yang digunakan untuk mengatur dan mengelola dependensi pada proyek Anda. [npm](https://www.npmjs.com/) dan [Yarn](http://yarnpkg.com/) adalah manajer paket yang paling sering digunakan pada aplikasi React dimana keduanya adalah klien yang memiliki registri paket npm yang sama.
 
 ## CDN {#cdn}
 
-CDN adalah singkatan dari Content Delivery Network. CDN menyediakan konten yang statis dan di-_cache_ dari jaringan server diseluruh dunia.
+CDN adalah singkatan dari _Content Delivery Network_. CDN menyediakan konten yang statis dan di-_cache_ dari jaringan server di seluruh dunia.
 
 ## JSX {#jsx}
 
-JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa _template_, namum memiliki kekuatan penuh atas bahasa JavaScript. JSX dijalankan menjadi format `React.createElement()` yang mengembalikan objek JavaScript baru berupa "Elemen React". Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat [dokumentasi JSX](/docs/introducing-jsx.html), atau mengenai JSX dengan lebih mendalam [di sini](https://reactjs.org/docs/introducing-jsx.html)
+JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa _template_, namun memiliki kekuatan penuh atas bahasa JavaScript. JSX akan dikompilasi ke pemanggilan `React.createElement()` yang mengembalikan objek JavaScript biasa bernama "React elements". Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat [dokumentasi JSX](/docs/introducing-jsx.html), atau mengenai JSX dengan lebih mendalam [di sini](https://reactjs.org/docs/introducing-jsx.html)
 
-Tidak seperti dalam HTML, React DOM menggunakan format _camelCase_ untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
+Alih-alih menggunakan nama atribut HTML, React DOM menggunakan konvensi penamaan *camelCase* untuk penamaan atributnya. Sebagai contoh, `tabindex` menjadi `tabIndex` di JSX. Atribut `class` juga ditulis sebagai `className` karena `class` adalah nama yang telah dipesan dalam JavaScript.
 
 
 ```js
@@ -50,7 +50,7 @@ ReactDOM.render(
 
 ## [Elemen](/docs/rendering-elements.html) {#elements}
 
-React Elemen adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (immutable).
+Elemen React adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah 'komponen' yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (*immutable*).
 
 ```js
 const element = <h1>Hai, dunia</h1>;
@@ -78,14 +78,14 @@ class Welcome extends React.Component {
 }
 ```
 
-Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan array, string, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), akan lebih baik jika bagian tersebut menggunakan Reusable Component. Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.
+Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan senarai, _string_, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), komponen-komponen tersebut adalah kandidat yang cocok untuk dijadikan komponen yang dapat digunakan kembali (*reusable component*). Nama komponen juga harus selalu diawali dengan huruf kapital (`<Wrapper/>` **bukan** `<wrapper/>`). Lihat [dokumentasi](https://reactjs.org/docs/components-and-props.html#rendering-a-component) untuk penjelasan mengenai cara melakukan _render_ komponen.
 
 
 ### [`props`](/docs/components-and-props.html) {#props}
 
 `props` adalah masukan dari komponen React. `props` adalah data yang dioper dari _parent component_ ke _child component_-nya.
 
-Perlu diingat bahwa `props` adalah _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:
+Perlu diingat bahwa `props` bersifat _readonly_, sehingga nilainya tidak dapat diubah melalui cara apapun:
 
 ```js
 // Wrong!
@@ -122,15 +122,15 @@ class Welcome extends React.Component {
 
 ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state}
 
-Sebuah komponen membutuhkan `state` saat sebuah data yang berhubungan dengannya berubah sewaktu-waktu. Sebagia contoh, sebuah komponen `Checkbox` dapat membutuhkan _state_ `isChecked`, dan sebuah komponen `NewsFeed` bisa jadi selalu membutuhkan _state_ `fetchedPost` terbaru.
+Sebuah komponen membutuhkan `state` saat sebuah data yang berhubungan dengannya berubah sewaktu-waktu. Sebagai contoh, sebuah komponen `Checkbox` dapat membutuhkan _state_ `isChecked`, dan sebuah komponen `NewsFeed` bisa jadi selalu membutuhkan _state_ `fetchedPost` terbaru.
 
 Perbedaan paling penting diantara `state` dan `props` adalah `props` dioper melalui _parent component_, sedangkan `state` diatur oleh komponen itu sendiri. Sebuah komponen tidak dapat mengubah `props`, tetapi dapat mengubah `state`. Untuk melakukannya, komponen tersebut harus memanggil fungsi `this.setState()`. Hanya komponen yang didefinisikan sebagai kelas yang dapat memiliki _state_.
 
-Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [lift it up](/docs/lifting-state-up.html), atau angkat nilainya ke arah pendahulunya yang terdekat, kemudian oper sebagai _props_ untuk kedua komponen tersebut.
+Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang 'memiliki' data tersebut sebagai _state_ di dalamnya. Jangan mencoba untuk melakukan sinkronisasi _state_ pada dua komponen yang berbeda. Sebaliknya, [angkat nilainya ke atas](/docs/lifting-state-up.html), kemudian oper sebagai _props_ untuk kedua komponen tersebut.
 
-## [Metode Lifecycle](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
+## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
 
-Metode lifecycle adalah fungsionalitas khusus yang dijalankan selama fase tertentu dalam sebuah komponen. Terdapat beberapa metode yang tersedia saat komponen dibuat dan dimasukkan kedalam DOM ([mounting](/docs/react-component.html#mounting)), saat komponen diperbarui, dan saat komponen dilepas atau dihapus dari DOM.
+_Lifecycle Methods_ adalah fungsionalitas khusus yang dijalankan selama fase tertentu dalam sebuah komponen. Terdapat beberapa metode yang tersedia saat komponen dibuat dan dimasukkan kedalam DOM ([mounting](/docs/react-component.html#mounting)), saat komponen diperbarui, dan saat komponen dilepas atau dihapus dari DOM.
 
  ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)
 
@@ -138,17 +138,17 @@ React memiliki dua pendekatan berbeda untuk mengatur masukan formulir.
 
 Sebuah elemen masukan formulir yang nilainya diatur oleh React disebut sebagai *_controlled component*. Saat seorang pengguna memasukkan data kedalam _controlled component_, sebuah _event handler_ terpicu, dan kode Anda yang selanjutnya menentukan apakah masukan valid atau tidak (dengan cara merender ulang dengan nilai yang telah diperbarui). Jika Anda tidak merender ulang, maka nilai formulir tidak akan berubah.
 
-Sebuah *uncontrolled component* bekerja seperti hal yang dilakukan elemen formulir diluar React. Disaat pengguna memasukkan data kedalam formulir (melalui kotak input, _dropdown_, dll) nilai yang telah diperbarui akan digunakan tanpa React perlu melakukan apapun. Bagaimanapun, hal ini berari Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.
+Sebuah *uncontrolled component* bekerja seperti hal yang dilakukan elemen formulir diluar React. Disaat pengguna memasukkan data kedalam formulir (melalui kotak input, _dropdown_, dll) nilai yang telah diperbarui akan digunakan tanpa React perlu melakukan apapun. Namun, hal ini berarti Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.
 
 Dalam banyak kasus, Anda harus menggunakan _controlled components_.
 
 ## [Keys](/docs/lists-and-keys.html) {#keys}
 
-Sebuah "key" adalah karakter spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk array. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. Keys harus diberikan pada elemen dalam sebuah array untuk memberikan identitas yang stabil pada elemen tersebut.
+Sebuah "*key*" adalah atribut *string* spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk senarai. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. *Keys* harus diberikan pada elemen dalam sebuah senarai untuk memberikan identitas yang stabil pada elemen tersebut.
 
-Keys hanya perlu bersifat unik dengan elemen lainnya dalam array yag sama. Keys tidak perlu unik diseluruh aplikasi atau bahkan didalam komponen yang sama.
+*Keys* hanya perlu bersifat unik dengan elemen lainnya dalam senarai yag sama. *Keys* tidak perlu bersifat unik di seluruh aplikasi atau bahkan di dalam komponen yang sama.
 
-Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui _di-render_ ulang, sehingga React dapat mentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
+Jangan mengoper nilai `Math.random()` sebagai key. Penting untuk diingat bahwa key harus memiliki "identitas yang stabil" walau melalui _di-render_ ulang, sehingga React dapat menentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti `post.id`.
 
 ## [Refs](/docs/refs-and-the-dom.html) {#refs}
 
@@ -160,8 +160,8 @@ Gunakan refs-and dengan bijak. Jika anda merasa sering menggunakan refs untuk "m
 
 Menangani _event_ dengan Elemen React memiliki perbedaan secara sintaksis:
 
-* _Event handler_ pada React ditulis menggunakan camelCase, bukan sebagai huruf kecil.
-* Dengan JSX, Anda mengoper sebuah fungsi sebagai _event handler_, bukan sebagai string.
+* _Event handler_ pada React ditulis menggunakan *camelCase*, bukan sebagai huruf kecil.
+* Dengan JSX, Anda mengoper sebuah fungsi sebagai _event handler_, bukan sebagai _string_.
 
 ## [Rekonsiliasi](/docs/reconciliation.html) {#reconciliation}
 

From e898f775df17a8c9dae65ccfa06b105260422389 Mon Sep 17 00:00:00 2001
From: imiro <ajim1417@gmail.com>
Date: Sat, 23 Mar 2019 15:16:04 +0700
Subject: [PATCH 4/5] Translate Render Props

---
 content/docs/render-props.md | 111 ++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 53 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index c9b6f9c04..1584165ef 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -1,28 +1,28 @@
 ---
 id: render-props
-title: Render Props
+title: Props Render
 permalink: docs/render-props.html
 ---
 
-The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function.
+Istilah ["_props render_"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) merujuk kepada sebuah teknik untuk berbagi kode antara komponen React menggunakan suatu prop yang nilainya merupakan suatu fungsi.
 
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+Sebuah komponen dengan _props render_ mengambil suatu fungsi yang mengembalikan suatu elemen React dan memanggilnya alih-alih mengimplementasikan logika _render_-nya sendiri
 
 ```jsx
 <DataProvider render={data => (
-  <h1>Hello {data.target}</h1>
+  <h1>Halo {data.target}</h1>
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
+_Library_ yang menggunakan _props render_ termasuk [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) dan [Downshift](https://github.com/paypal/downshift).
 
-In this document, we’ll discuss why render props are useful, and how to write your own.
+Pada dokumen ini, kita akan mendiskusikan mengapa _props render_ berguna, dan bagaimana menuliskan milik Anda sendiri.
 
-## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns}
+## Gunakan _Props Render_ untuk _*Urusan Lintas-Sektoral*_ {#use-render-props-for-cross-cutting-concerns}
 
-Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.
+Komponen merupakan unit utama dari penggunakan kembali kode di React, namun tidak selalu jelas bagaimana membagikan _state_ atau perilaku tertentu yang dimiliki suatu komponen ke komponen lainnya yang membutuhkan _state_ yang sama itu.
 
-For example, the following component tracks the mouse position in a web app:
+Sebagai contoh, komponen berikut ini mengikuti posisi tetikus di suatu aplikasi _web_:
 
 ```js
 class MouseTracker extends React.Component {
@@ -42,19 +42,19 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Move the mouse around!</h1>
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        <h1>Gerakkan tetikus!</h1>
+        <p>Posisi tetikus saat ini adalah ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
 }
 ```
 
-As the cursor moves around the screen, the component displays its (x, y) coordinates in a `<p>`.
+Ketika kursor  bergerak di layar, komponen menampilkan koordinat (x, y) dari kursor di sebuah `<p>`.
 
-Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component?
+Kemudian muncul pertanyaan: Bagaimana kita bisa menggunakan kembali perilaku ini pada komponen lainnya? Dengan kata lain, apabila ada komponen lain yang membutuhkan informasi tentang posisi kursor, dapatkah kita merangkum perilaku ini sehingga kita dapat dengan mudah membagikan informasi posisi kursor kepada komponen tersebut?
 
-Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere.
+Karena komponen merupakan unit dasar penggunaan kembali kode di React, mari kita coba menyusun ulang kode sebelumnya sedikit untuk menggunakan komponen `<Mouse>` yang merangkum perilaku yang perlu kita gunakan di tempat lain.
 
 ```js
 // The <Mouse> component encapsulates the behavior we need...
@@ -76,8 +76,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...but how do we render something other than a <p>? */}
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        {/* ... namun bagaimana kita me-render sesuatu yang lain selain <p>? */}
+        <p>Posisi tetikus saat ini adalah ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Gerakkan tetikus!</h1>
         <Mouse />
       </div>
     );
@@ -95,11 +95,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now the `<Mouse>` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable.
+Sekarang komponen `<Mouse>` telah merangkum semua perilaku yang terkait dengan mendengar pada _event_ `mousemove` serta menyimpan posisi (x, y) dari kursor, namun hasil ini belum benar-benar dapat digunakan kembali di tempat lain (_reusable_).
 
-For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen.
+Sebagai contoh, anggap kita memiliki sebuah komponen `<Cat>` yang me-_render_ gambar kucing sedang mengejar tetikus di layar. Kita dapat menggunakan props `<Cat mouse={{ x, y }}>` untuk memberitahukan pada komponen itu koordinat tetikus sehingga ia mengetahui di mana harus memposisikan gambar di layar.
 
-As a first pass, you might try rendering the `<Cat>` *inside `<Mouse>`'s `render` method*, like this:
+Sebagai usaha pertama, Anda bisa mencoba me-_render_ `<Cat>` *di dalam metode `render` milik `<Mouse>`*, seperti ini:
 
 ```js
 class Cat extends React.Component {
@@ -130,10 +130,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          We could just swap out the <p> for a <Cat> here ... but then
-          we would need to create a separate <MouseWithSomethingElse>
-          component every time we need to use it, so <MouseWithCat>
-          isn't really reusable yet.
+         Kita bisa saja hanya menukar <p> dengan <Cat> di sini ... tapi
+         kita akan harus membuat komponen lain <MouseWithSomethingElse>
+         setiap kali kita perlu menggunakannya, sehingga komponen <MouseWithCat>
+         belum benar-benar bisa dikatakan reusable (dapat digunakan kembali).
         */}
         <Cat mouse={this.state} />
       </div>
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
         <MouseWithCat />
       </div>
     );
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case.
+Pendekatan ini akan bekerja untuk kasus penggunaan ini secara spesifik, namun kita belum berhasil mencapai tujuan untuk benar-benar merangkum perilaku yang kita inginkan (melacak posisi kursor) agar dapat dengan mudah digunakan kembali. Sekarang, setiap kali kita ingin mengetahui posisi kursor untuk kasus penggunaan yang lain, kita masih harus membuat sebuah komponen baru (i.e. komponen  `<MouseWithCat>` lainnya) yang me-_render_ sesuatu secara spesifik untuk kasus tersebut.
 
-Here's where the render prop comes in: Instead of hard-coding a `<Cat>` inside a `<Mouse>` component, and effectively changing its rendered output, we can provide `<Mouse>` with a function prop that it uses to dynamically determine what to render–a render prop.
+Di sinilah _props render_ bisa digunakan: alih-alih menuliskan sebuah `<Cat>` di dalam sebuah komponen '<Mouse>', dan secara efektif mengubah hasil _render_ nya, kita dapat memberikan `<Mouse>` sebuah props berupa suatu fungsi yang digunakan untuk menentukan secara dinamis apa yang akan di-_render_ - sebuah _props render_.
 
 ```js
 class Cat extends React.Component {
@@ -188,6 +188,7 @@ class Mouse extends React.Component {
         {/*
           Instead of providing a static representation of what <Mouse> renders,
           use the `render` prop to dynamically determine what to render.
+          Alih-alih memberikan representasi statis dari apa yang di _render_ oleh <Mouse>, gunakan prop `render` untuk secara dinamis menentukan apa yang seharusnya di _render_.
         */}
         {this.props.render(this.state)}
       </div>
@@ -199,7 +200,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Gerakkan tetikus!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -209,17 +210,19 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Dengan begini, alih-alih mengkloning komponen `<Mouse>` dan menulis secara eksplisit sesuatu yang berbeda di dalam metode `render` untuk setiap kasus penggunaan, kita memberikan suatu props `render` kepada komponen `<Mouse>` yang dapat digunakan untuk menentukan apa yang harus di _render_ secara dinamis.
 
-More concretely, **a render prop is a function prop that a component uses to know what to render.**
+Secara lebih konkrit, **sebuah _props render_ adalah suatu _prop_ berupa sebuah fungsi yang digunakan suatu komponen untuk mengetahui apa yang harus ia _render_.**
 
-This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `<Mouse>` with a `render` prop that tells it what to render with the current (x, y) of the cursor.
+Teknik ini membuat perilaku yang perlu kita bagikan menjadi amat _portabel_. Untuk mendapatkan perilaku tersebut, _render_-lah sebuah `<Mouse>` dengan sebuah _props_ `render` yang memberitahunya apa yang harus di-_render_ dengan posisi (x, y) kursor saat ini.
 
-One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
+Satu hal menarik tentang props render adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan  komponen `<Mouse>` biasa dengan suatu _props render_:
 
 ```js
 // If you really want a HOC for some reason, you can easily
 // create one using a regular component with a render prop!
+// Jika Anda
+//
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -233,47 +236,46 @@ function withMouse(Component) {
 }
 ```
 
-So using a render prop makes it possible to use either pattern.
+Menggunakan _props render_ membuat pola manapun mungkin digunakan.
 
-## Using Props Other Than `render` {#using-props-other-than-render}
+## Menggunakan Props Selain `render` {#using-props-other-than-render}
 
-It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Penting untuk diingat bahwa meskipun pola ini disebut "_render props (props render)_" bukan berarti Anda *harus menggunakan* props *dengan nama `render` untuk menggunakannya.* Sebaliknya, [_props_ *apapun* yang merupakan sebuah fungsi yang digunakan oleh komponen untuk mengetahui apa yang harus di-_render_ secara teknis merupakan sebuah "_prop render_"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
-Although the examples above use `render`, we could just as easily use the `children` prop!
+Meskipun contoh-contoh di atas menggunakan kata kunci `render`, kita dapat dengan sama mudahnya menggunakan props `children`!
 
 ```js
 <Mouse children={mouse => (
-  <p>The mouse position is {mouse.x}, {mouse.y}</p>
+  <p>Posisi tetikus ada di {mouse.x}, {mouse.y}</p>
 )}/>
 ```
 
-And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element!
+Dan ingat, props `children` sesungguhnya tidak perlu disebutkan secara eksplisit sebagai daftar "atribut" di elemen JSX Anda. Malah, Anda dapat meletakkanya secara langsung *di dalam* suatu elemen!
 
 ```js
 <Mouse>
   {mouse => (
-    <p>The mouse position is {mouse.x}, {mouse.y}</p>
+    <p>Posisi kursor saat ini ada di {mouse.x}, {mouse.y}</p>
   )}
 </Mouse>
 ```
 
-You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API.
+Anda akan melihat teknik ini digunakan di API [react-motion](https://github.com/chenglou/react-motion).
 
-Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
+Karena teknik ini sedikit tidak biasa, Anda mungkin akan ingin menyatakan secara eksplisit  bahwa props `children` haruslah suatu fungsi pada `propTypes` Anda ketika mendesain suatu API seperti ini.
 
 ```js
 Mouse.propTypes = {
   children: PropTypes.func.isRequired
 };
 ```
+## Peringatan {#caveats}
 
-## Caveats {#caveats}
+### Berhati-hatilah ketika menggunakan Props Render dengan React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
+Menggunakan sebuah _props render_ dapat menghilangkan keuntungan yang didapatkan dengan menggunakan [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) jika Anda membuat fungsi di dalam metode `render`. Hal ini disebabkan karena perbandingan props yang dangkal (_shallow prop comparison_) pada PureComponent akan selalu mengembalikan nilai `false` untuk props baru, dan setiap `render` dalam kasus ini akan menghasilkan nilai baru untuk _props render_.
 
-Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop.
-
-For example, continuing with our `<Mouse>` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this:
+Sebagai contoh, melanjutkan dengan komponen `<Mouse>` dari pembahasan di atas, jika `Mouse` meng-_extend_ `React.PureComponent` alih-alih `React.Component`, contoh kita akan menjadi seperti berikut:
 
 ```js
 class Mouse extends React.PureComponent {
@@ -284,11 +286,11 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
 
         {/*
-          This is bad! The value of the `render` prop will
-          be different on each render.
+          Ini tidak baik! Nilai dari prop `render`
+          akan selalu berbeda pada setiap render
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -299,14 +301,16 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In this example, each time `<MouseTracker>` renders, it generates a new function as the value of the `<Mouse render>` prop, thus negating the effect of `<Mouse>` extending `React.PureComponent` in the first place!
+Dalam contoh ini, setiap kali `<MouseTracker>` di-_render_, ia akan menghasilkan sebuah fungsi baru sebagai nilai dari props `<Mouse render>`, sehingga menghilangkan efek `<Mouse>` yang meng-_extend_ `React.PureComponent` sejak awal!
 
-To get around this problem, you can sometimes define the prop as an instance method, like so:
+Untu mengatasi permasalahan ini, Anda sekali waktu dapat mendefinisikan props ini sebagai _instance_ dari sebuah metode, seperti contoh berikut:
 
 ```js
 class MouseTracker extends React.Component {
   // Defined as an instance method, `this.renderTheCat` always
   // refers to *same* function when we use it in render
+  // Didefinisikan sebagai *instance* dari metode, `this.renderTheCat` selalu
+  // merujuk kepada fungsi yang *sama* ketika kita menggunakannya di render
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }
@@ -314,7 +318,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );
@@ -322,4 +326,5 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `<Mouse>` should extend `React.Component` instead.
+Pada kasus-kasus di mana Anda tidak dapat mendefinisikan props secara statis (e.g. karena Anda harus menutup _props_ dan/atau _state_ dari komponen tertentu) `<Mouse>` seharusnya meng-_extend_ `React.Component` saja.
+ẁ

From ac3ae32d93fc0a5d51b8960cdc8c2fc0ec7bda0e Mon Sep 17 00:00:00 2001
From: imiro <ajim1417@gmail.com>
Date: Fri, 29 Mar 2019 23:30:30 +0700
Subject: [PATCH 5/5] Apply suggestions from code review

Co-Authored-By: imiro <ajim1417@gmail.com>
---
 content/docs/render-props.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 1584165ef..9553a9c29 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -16,11 +16,11 @@ Sebuah komponen dengan _props render_ mengambil suatu fungsi yang mengembalikan
 
 _Library_ yang menggunakan _props render_ termasuk [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) dan [Downshift](https://github.com/paypal/downshift).
 
-Pada dokumen ini, kita akan mendiskusikan mengapa _props render_ berguna, dan bagaimana menuliskan milik Anda sendiri.
+Pada dokumen ini kita akan mendiskusikan mengapa _props render_ berguna serta bagaimana cara menulisnya.
 
 ## Gunakan _Props Render_ untuk _*Urusan Lintas-Sektoral*_ {#use-render-props-for-cross-cutting-concerns}
 
-Komponen merupakan unit utama dari penggunakan kembali kode di React, namun tidak selalu jelas bagaimana membagikan _state_ atau perilaku tertentu yang dimiliki suatu komponen ke komponen lainnya yang membutuhkan _state_ yang sama itu.
+Komponen merupakan unit utama dari penggunaan kembali kode di React, namun tidak selalu jelas bagaimana membagikan _state_ atau perilaku tertentu yang dimiliki suatu komponen ke komponen lainnya yang membutuhkan _state_ yang sama itu.
 
 Sebagai contoh, komponen berikut ini mengikuti posisi tetikus di suatu aplikasi _web_:
 
@@ -42,7 +42,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Gerakkan tetikus!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
         <p>Posisi tetikus saat ini adalah ({this.state.x}, {this.state.y})</p>
       </div>
     );
@@ -50,7 +50,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Ketika kursor  bergerak di layar, komponen menampilkan koordinat (x, y) dari kursor di sebuah `<p>`.
+Ketika kursor bergerak di layar, komponen menampilkan koordinat (x, y) dari kursor di sebuah `<p>`.
 
 Kemudian muncul pertanyaan: Bagaimana kita bisa menggunakan kembali perilaku ini pada komponen lainnya? Dengan kata lain, apabila ada komponen lain yang membutuhkan informasi tentang posisi kursor, dapatkah kita merangkum perilaku ini sehingga kita dapat dengan mudah membagikan informasi posisi kursor kepada komponen tersebut?
 
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Gerakkan tetikus!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
         <Mouse />
       </div>
     );
@@ -200,7 +200,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Gerakkan tetikus!</h1>
+        <h1>Gerak-gerakkan tetikus!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -210,13 +210,13 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dengan begini, alih-alih mengkloning komponen `<Mouse>` dan menulis secara eksplisit sesuatu yang berbeda di dalam metode `render` untuk setiap kasus penggunaan, kita memberikan suatu props `render` kepada komponen `<Mouse>` yang dapat digunakan untuk menentukan apa yang harus di _render_ secara dinamis.
+Dengan begini, alih-alih mengkloning komponen `<Mouse>` dan menulis secara eksplisit sesuatu yang berbeda di dalam metode `render` untuk setiap kasus penggunaan, kita memberikan suatu props `render` kepada komponen `<Mouse>` yang dapat digunakan untuk menentukan apa yang harus di-_render_ secara dinamis.
 
 Secara lebih konkrit, **sebuah _props render_ adalah suatu _prop_ berupa sebuah fungsi yang digunakan suatu komponen untuk mengetahui apa yang harus ia _render_.**
 
-Teknik ini membuat perilaku yang perlu kita bagikan menjadi amat _portabel_. Untuk mendapatkan perilaku tersebut, _render_-lah sebuah `<Mouse>` dengan sebuah _props_ `render` yang memberitahunya apa yang harus di-_render_ dengan posisi (x, y) kursor saat ini.
+Teknik ini membuat perilaku yang perlu kita bagikan menjadi amat portabel. Untuk mendapatkan perilaku tersebut, _render_-lah sebuah `<Mouse>` dengan sebuah _props_ `render` yang memberitahunya apa yang harus di-_render_ dengan posisi (x, y) kursor saat ini.
 
-Satu hal menarik tentang props render adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan  komponen `<Mouse>` biasa dengan suatu _props render_:
+Satu hal menarik tentang _props render_ adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan komponen `<Mouse>` biasa dengan suatu _props render_:
 
 ```js
 // If you really want a HOC for some reason, you can easily
@@ -262,7 +262,7 @@ Dan ingat, props `children` sesungguhnya tidak perlu disebutkan secara eksplisit
 
 Anda akan melihat teknik ini digunakan di API [react-motion](https://github.com/chenglou/react-motion).
 
-Karena teknik ini sedikit tidak biasa, Anda mungkin akan ingin menyatakan secara eksplisit  bahwa props `children` haruslah suatu fungsi pada `propTypes` Anda ketika mendesain suatu API seperti ini.
+Karena teknik ini sedikit tidak biasa, Anda mungkin ingin menyatakan secara eksplisit bahwa props `children` haruslah suatu fungsi pada `propTypes` Anda ketika mendesain suatu API seperti ini.
 
 ```js
 Mouse.propTypes = {
@@ -273,7 +273,7 @@ Mouse.propTypes = {
 
 ### Berhati-hatilah ketika menggunakan Props Render dengan React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Menggunakan sebuah _props render_ dapat menghilangkan keuntungan yang didapatkan dengan menggunakan [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) jika Anda membuat fungsi di dalam metode `render`. Hal ini disebabkan karena perbandingan props yang dangkal (_shallow prop comparison_) pada PureComponent akan selalu mengembalikan nilai `false` untuk props baru, dan setiap `render` dalam kasus ini akan menghasilkan nilai baru untuk _props render_.
+Menggunakan sebuah _props render_ dapat menghilangkan keuntungan yang didapatkan dengan menggunakan [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) jika Anda membuat fungsi di dalam metode `render`. Hal ini disebabkan karena perbandingan _props_ yang dangkal (_shallow prop comparison_) pada PureComponent akan selalu mengembalikan nilai `false` untuk props baru, dan setiap `render` dalam kasus ini akan menghasilkan nilai baru untuk _props render_.
 
 Sebagai contoh, melanjutkan dengan komponen `<Mouse>` dari pembahasan di atas, jika `Mouse` meng-_extend_ `React.PureComponent` alih-alih `React.Component`, contoh kita akan menjadi seperti berikut:
 
@@ -290,7 +290,7 @@ class MouseTracker extends React.Component {
 
         {/*
           Ini tidak baik! Nilai dari prop `render`
-          akan selalu berbeda pada setiap render
+          akan selalu berbeda pada setiap render.
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -301,9 +301,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dalam contoh ini, setiap kali `<MouseTracker>` di-_render_, ia akan menghasilkan sebuah fungsi baru sebagai nilai dari props `<Mouse render>`, sehingga menghilangkan efek `<Mouse>` yang meng-_extend_ `React.PureComponent` sejak awal!
+Dalam contoh ini, setiap kali `<MouseTracker>` di-_render_, ia akan menghasilkan sebuah fungsi baru sebagai nilai dari _props_ `<Mouse render>`, sehingga menghilangkan efek `<Mouse>` yang meng-_extend_ `React.PureComponent` sejak awal!
 
-Untu mengatasi permasalahan ini, Anda sekali waktu dapat mendefinisikan props ini sebagai _instance_ dari sebuah metode, seperti contoh berikut:
+Untuk mengatasi permasalahan ini, Anda sesekali dapat mendefinisikan _props_ ini sebagai _instance_ dari sebuah metode, seperti contoh berikut:
 
 ```js
 class MouseTracker extends React.Component {
@@ -326,5 +326,5 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Pada kasus-kasus di mana Anda tidak dapat mendefinisikan props secara statis (e.g. karena Anda harus menutup _props_ dan/atau _state_ dari komponen tertentu) `<Mouse>` seharusnya meng-_extend_ `React.Component` saja.
+Pada kasus-kasus di mana Anda tidak dapat mendefinisikan _props_ secara statis (misalnya karena Anda harus menutup _props_ dan/atau _state_ dari komponen tertentu) `<Mouse>` seharusnya meng-_extend_ `React.Component` saja.
 ẁ