From c9aedc35aa6b98f45906560c26516db5ad93b0c5 Mon Sep 17 00:00:00 2001
From: rianonehub <rian@onehub.net>
Date: Wed, 13 Feb 2019 00:48:39 +0700
Subject: [PATCH 01/10] Translate Test Renderer

---
 content/docs/reference-test-renderer.md | 67 +++++++++++++------------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
index 473dfb7ec..b6724eab3 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/docs/reference-test-renderer.md
@@ -1,25 +1,26 @@
 ---
 id: test-renderer
-title: Test Renderer
+title: Uji Renderer
 permalink: docs/test-renderer.html
 layout: docs
 category: Reference
 ---
 
-**Importing**
+**Pengimporan**
 
 ```javascript
 import TestRenderer from 'react-test-renderer'; // ES6
-const TestRenderer = require('react-test-renderer'); // ES5 with npm
+const TestRenderer = require('react-test-renderer'); // ES5 dengan npm
 ```
 
-## Overview {#overview}
+## Ikhtisar {#overview}
 
-This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
 
-Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom).
+*Package* ini menyediakan *renderer* React  yang dapat digunakan untuk me-*render* komponen React menjadi objek JavaScript murni, tanpa bergantung pada DOM atau bahasa *native* pada telepon seluler.
 
-Example:
+Pada dasarnya, *package* ini membuat kemudahan untuk mengambil potret awal dari hierarki tampilan *platform* (mirip dengan pohon DOM) yang di-*render* oleh React DOM atau komponen React Native tanpa menggunakan *browser* atau [jsdom](https://github.com/tmpvar/jsdom).
+
+Contoh:
 
 ```javascript
 import TestRenderer from 'react-test-renderer';
@@ -38,9 +39,9 @@ console.log(testRenderer.toJSON());
 //   children: [ 'Facebook' ] }
 ```
 
-You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
+Anda dapat menggunakan fitur pengujian potret awal dari Jest untuk menyimpan salinan pohon JSON ke *file* secara otomatis dan memeriksa bahwa pengujian Anda tidak berubah: [Pelajari lebih lanjut](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
 
-You can also traverse the output to find specific nodes and make assertions about them.
+Anda juga dapat melewati ke bagian keluaran untuk menemukan *node* tertentu dan membuat pernyataan tentang *node - node* tersebut.
 
 ```javascript
 import TestRenderer from 'react-test-renderer';
@@ -94,7 +95,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 * [`testInstance.parent`](#testinstanceparent)
 * [`testInstance.children`](#testinstancechildren)
 
-## Reference {#reference}
+## Referensi {#reference}
 
 ### `TestRenderer.create()` {#testrenderercreate}
 
@@ -102,7 +103,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 TestRenderer.create(element, options);
 ```
 
-Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties.
+Membuat *instance* `TestRenderer` dengan mengoper elemen React. Hal ini tidak menggunakan DOM asli, tetapi masih sepenuhnya me-*render* pohon komponen ke dalam memori sehingga Anda dapat membuat sebuah pernyataan. *Instance* yang dihasilkan memiliki *method* dan *property* sebagai berikut.
 
 ### `testRenderer.toJSON()` {#testrenderertojson}
 
@@ -110,7 +111,7 @@ Create a `TestRenderer` instance with the passed React element. It doesn't use t
 testRenderer.toJSON()
 ```
 
-Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
+Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Pohon ini hanya berisi *node* *platform* khusus seperti `<div>` atau `<View>` dan beserta *props*-nya, tetapi tidak mengandung komponen yang dibuat oleh pengguna. Hal ini berguna untuk [pengujian potret](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
 
 ### `testRenderer.toTree()` {#testrenderertotree}
 
@@ -118,7 +119,7 @@ Return an object representing the rendered tree. This tree only contains the pla
 testRenderer.toTree()
 ```
 
-Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test renderer.
+Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Tidak seperti `toJSON ()`, representasinya lebih detail daripada yang dihasilkan oleh `toJSON ()`, dan termasuk komponen yang dibuat pengguna. Anda mungkin tidak memerlukan *method* ini kecuali Anda sedang membuat *library* pernyataan sendiri di atas uji *renderer*.
 
 ### `testRenderer.update()` {#testrendererupdate}
 
@@ -126,7 +127,7 @@ Return an object representing the rendered tree. Unlike `toJSON()`, the represen
 testRenderer.update(element)
 ```
 
-Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
+Me-*render* ulang pohon dalam memori dengan elemen *root* baru. Hal Ini mensimulasikan pembaruan React di *root*. Jika elemen baru memiliki tipe dan *key* yang sama dengan elemen sebelumnya, struktur pohon akan diperbarui; jika tidak, akan memasang ulang pohon yang baru.
 
 ### `testRenderer.unmount()` {#testrendererunmount}
 
@@ -134,7 +135,7 @@ Re-render the in-memory tree with a new root element. This simulates a React upd
 testRenderer.unmount()
 ```
 
-Unmount the in-memory tree, triggering the appropriate lifecycle events.
+Melepas pohon dalam memori, memicu siklus hidup *event* yang sesuai.
 
 ### `testRenderer.getInstance()` {#testrenderergetinstance}
 
@@ -142,7 +143,7 @@ Unmount the in-memory tree, triggering the appropriate lifecycle events.
 testRenderer.getInstance()
 ```
 
-Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don't have instances.
+Menghasilkan *instance* yang sesuai dengan elemen *root*, jika tersedia. Hal ini tidak akan berfungsi jika elemen *root* adalah *function component*, karena *function component* tidak memiliki *instance*.
 
 ### `testRenderer.root` {#testrendererroot}
 
@@ -150,7 +151,7 @@ Return the instance corresponding to the root element, if available. This will n
 testRenderer.root
 ```
 
-Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below.
+Menghasilkan objek *root* "uji *instance*"  yang berguna untuk membuat pernyataan tentang *node* tertentu di pohon. Anda dapat menggunakannya untuk menemukan "uji *instance*" lainnya secara lebih dalam di bawah ini.
 
 ### `testInstance.find()` {#testinstancefind}
 
@@ -158,7 +159,7 @@ Returns the root "test instance" object that is useful for making assertions abo
 testInstance.find(test)
 ```
 
-Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error.
+Menemukan turunan tunggal uji *instance* yang mana `test(testInstance)` menghasilkan nilai `true`. Jika `test(testInstance)` tidak menghasilkan nilai `true` untuk satu uji *instance*, hal ini akan melemparkan *error*.
 
 ### `testInstance.findByType()` {#testinstancefindbytype}
 
@@ -166,7 +167,7 @@ Find a single descendant test instance for which `test(testInstance)` returns `t
 testInstance.findByType(type)
 ```
 
-Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error.
+Menemukan turunan tunggal uji *instance* dengan berdasarkan `type` yang disediakan. Jika tidak ada satupun uji *instance* dengan `type` yang disediakan, hal ini akan melemparkan *error*.
 
 ### `testInstance.findByProps()` {#testinstancefindbyprops}
 
@@ -174,7 +175,7 @@ Find a single descendant test instance with the provided `type`. If there is not
 testInstance.findByProps(props)
 ```
 
-Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error.
+Menemukan turunan tunggal uji *instance* dengan berdasarkan `props` yang disediakan. Jika tidak ada satupun uji *instance* dengan `props` yang disediakan, hal ini akan melemparkan *error*.
 
 ### `testInstance.findAll()` {#testinstancefindall}
 
@@ -182,7 +183,7 @@ Find a single descendant test instance with the provided `props`. If there is no
 testInstance.findAll(test)
 ```
 
-Find all descendant test instances for which `test(testInstance)` returns `true`.
+Menemukan semua turunan uji *instance* yang mana `test(testInstance)` menghasilkan nilai `true`.
 
 ### `testInstance.findAllByType()` {#testinstancefindallbytype}
 
@@ -190,7 +191,7 @@ Find all descendant test instances for which `test(testInstance)` returns `true`
 testInstance.findAllByType(type)
 ```
 
-Find all descendant test instances with the provided `type`.
+Menemukan semua turunan uji *instance* dengan berdasarkan `type` yang disediakan.
 
 ### `testInstance.findAllByProps()` {#testinstancefindallbyprops}
 
@@ -198,7 +199,7 @@ Find all descendant test instances with the provided `type`.
 testInstance.findAllByProps(props)
 ```
 
-Find all descendant test instances with the provided `props`.
+Menemukan semua turunan uji *instance* dengan berdasarkan `props` yang disediakan.
 
 ### `testInstance.instance` {#testinstanceinstance}
 
@@ -206,7 +207,7 @@ Find all descendant test instances with the provided `props`.
 testInstance.instance
 ```
 
-The component instance corresponding to this test instance. It is only available for class components, as function components don't have instances. It matches the `this` value inside the given component.
+*Instance* dari komponen yang ada di uji *instance*. Hanya tersedia untuk *class component*, karena *function component* tidak memiliki *instance*. Hal Ini sama dengan nilai `this` di dalam komponen yang diberikan.
 
 ### `testInstance.type` {#testinstancetype}
 
@@ -214,7 +215,7 @@ The component instance corresponding to this test instance. It is only available
 testInstance.type
 ```
 
-The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
+Jenis dari komponen yang ada di uji *instance*. Sebagai contoh, komponen `<Button />` memiliki tipe `Button`.
 
 ### `testInstance.props` {#testinstanceprops}
 
@@ -222,7 +223,7 @@ The component type corresponding to this test instance. For example, a `<Button
 testInstance.props
 ```
 
-The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props.
+*Props* yang ada di uji *instance*. Sebagai contoh, komponen `<Button size="small" />` memiliki `{size: 'small'}` sebagai *props*.
 
 ### `testInstance.parent` {#testinstanceparent}
 
@@ -230,7 +231,7 @@ The props corresponding to this test instance. For example, a `<Button size="sma
 testInstance.parent
 ```
 
-The parent test instance of this test instance.
+Induk uji *instance* dari uji *instance* ini.
 
 ### `testInstance.children` {#testinstancechildren}
 
@@ -238,13 +239,13 @@ The parent test instance of this test instance.
 testInstance.children
 ```
 
-The children test instances of this test instance.
+Anak uji *instance* dari uji *instance* ini.
 
-## Ideas {#ideas}
+## Gagasan {#ideas}
 
-You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
-`createNodeMock` accepts the current element and should return a mock ref object.
-This is useful when you test a component that relies on refs.
+Anda dapat mengoper *function* `createNodeMock` ke ` TestRenderer.create` sebagai opsinya, yang memungkinkan untuk referensi tiruan yang sudah diubah.
+`createNodeMock` menerima elemen tersebut dan harus menghasilkan objek referensi tiruan.
+Hal Ini berguna ketika Anda menguji sebuah komponen yang bergantung pada referensi.
 
 ```javascript
 import TestRenderer from 'react-test-renderer';
@@ -268,7 +269,7 @@ TestRenderer.create(
   {
     createNodeMock: (element) => {
       if (element.type === 'input') {
-        // mock a focus function
+        // tiruan function focus
         return {
           focus: () => {
             focused = true;

From 03ace3f654ca80046c6d612cb53248c8308a4b64 Mon Sep 17 00:00:00 2001
From: lunmay <28674102+lunmay@users.noreply.github.com>
Date: Wed, 27 Feb 2019 08:18:01 +0100
Subject: [PATCH 02/10] Translated Refs and The DOM

---
 content/docs/refs-and-the-dom.md | 132 +++++++++++++++----------------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 9b56fcc9f..19de4c4e1 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -1,6 +1,6 @@
 ---
 id: refs-and-the-dom
-title: Refs and the DOM
+title: Ref dan DOM
 redirect_from:
   - "docs/working-with-the-browser.html"
   - "docs/more-about-refs.html"
@@ -11,33 +11,33 @@ redirect_from:
 permalink: docs/refs-and-the-dom.html
 ---
 
-Refs provide a way to access DOM nodes or React elements created in the render method.
+*Ref* menyediakan cara untuk mengakses simpul DOM atau elemen React yang dibuat dalam *render method*.
 
-In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
+Dalam *dataflow* React yang umum, [*props*](/docs/components-and-props.html) adalah satu-satunya cara bagi komponen induk untuk berinteraksi dengan anaknya. Untuk memodifikasi anak, Anda me-*render* ulang dengan *props* yang baru. Tetapi ada beberapa kasus ketika Anda harus memodifikasi anak secara imperatif di luar *dataflow* yang umum. Anak yang akan dimodifikasi bisa berupa komponen React atau elemen DOM. Pada kedua kasus ini, React menyediakan jalan keluar.
 
-### When to Use Refs {#when-to-use-refs}
+### Kapan Harus Menggunakan *Ref* {#when-to-use-refs}
 
-There are a few good use cases for refs:
+Ada beberapa kasus yang cocok untuk *ref*:
 
-* Managing focus, text selection, or media playback.
-* Triggering imperative animations.
-* Integrating with third-party DOM libraries.
+* Mengelola fokus, pemilihan teks, atau pemutaran media.
+* Memicu animasi secara imperatif.
+* Mengintegrasikan dengan *library* DOM pihak ketiga.
 
-Avoid using refs for anything that can be done declaratively.
+Hindari penggunaan *ref* untuk semua yang bisa dilakukan secara deklaratif.
 
-For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it.
+Misalnya, alih-alih mengekspos *method* `open()` dan `close()` pada komponen `Dialog`, operkan *props* `isOpen` kepadanya.
 
-### Don't Overuse Refs {#dont-overuse-refs}
+### Jangan Berlebihan Menggunakan *Ref* {#dont-overuse-refs}
 
-Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this.
+Godaan pertama mungkin adalah menggunakan *ref* agar aplikasi "bisa berfungsi". Jika benar demikian, hentikan sejenak dan pikirkan secara kritis, tempat *state* harus berada dalam hierarki komponen. Sering kali nantinya ditemukan bahwa tempat yang lebih baik untuk "memiliki" *state* tersebut adalah di tingkat yang lebih tinggi dalam hierarki. Lihat panduan [Meningkatkan *State*](/docs/lifting-state-up.html) untuk contohnya.
 
-> Note
+> Catatan
 >
-> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs) instead.
+> Contoh berikut telah diperbarui untuk menggunakan API `React.createRef()` yang diperkenalkan dalam React 16.3. Jika Anda menggunakan versi React sebelumnya, kami sarankan untuk menggunakan [*callback ref*](#callback-refs).
 
-### Creating Refs {#creating-refs}
+### Membuat *Ref* {#creating-refs}
 
-Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
+*Ref* dibuat menggunakan `React.createRef()` dan disematkan ke elemen React lewat atribut `ref`. *Ref* umumnya ditetapkan ke properti instans saat komponen dibuat agar mereka bisa dirujuk dalam komponen.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -51,44 +51,44 @@ class MyComponent extends React.Component {
 }
 ```
 
-### Accessing Refs {#accessing-refs}
+### Mengakses *Ref* {#accessing-refs}
 
-When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current` attribute of the ref.
+Ketika *ref* dioper ke elemen dalam `render`, sebuah referensi ke simpul akan tersedia untuk diakses pada atribut `current` milik *ref*.
 
 ```javascript
 const node = this.myRef.current;
 ```
 
-The value of the ref differs depending on the type of the node:
+Nilai *ref* berbeda-beda tergantung jenis simpulnya:
 
-- When the `ref` attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()` receives the underlying DOM element as its `current` property.
-- When the `ref` attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`.
-- **You may not use the `ref` attribute on function components** because they don't have instances.
+- Ketika atribut `ref` digunakan pada elemen HTML, `ref` yang dibuat dalam konstruktor dengan `React.createRef()` menerima elemen DOM yang mendasari sebagai properti `current` miliknya.
+- Saat atribut `ref` digunakan pada *class component* khusus, objek `ref` menerima instans yang dipasang milik komponen sebagai `current`-nya.
+- **Anda tidak diizinkan untuk menggunakan atribut `ref` pada *function component*** karena komponen tersebut tidak memiliki instans.
 
-The examples below demonstrate the differences.
+Contoh berikut menunjukkan perbedaannya.
 
-#### Adding a Ref to a DOM Element {#adding-a-ref-to-a-dom-element}
+#### Menambahkan *Ref* pada elemen DOM {#adding-a-ref-to-a-dom-element}
 
-This code uses a `ref` to store a reference to a DOM node:
+Kode berikut menggunakan `ref` untuk menyimpan referensi ke simpul DOM:
 
 ```javascript{5,12,22}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // create a ref to store the textInput DOM element
+    // buat ref untuk menyimpan elemen DOM textInput
     this.textInput = React.createRef();
     this.focusTextInput = this.focusTextInput.bind(this);
   }
 
   focusTextInput() {
-    // Explicitly focus the text input using the raw DOM API
-    // Note: we're accessing "current" to get the DOM node
+    // Fokuskan secara eksplisit pada input teks menggunakan API DOM mentah
+    // Catatan: kita sedang mengakses "current" untuk mendapatkan simpul DOM
     this.textInput.current.focus();
   }
 
   render() {
-    // tell React that we want to associate the <input> ref
-    // with the `textInput` that we created in the constructor
+    // beri tahu React bahwa kita ingin mengasosiasikan *ref* <input>
+    // dengan `textInput` yang kita buat dalam konstruktor
     return (
       <div>
         <input
@@ -96,7 +96,7 @@ class CustomTextInput extends React.Component {
           ref={this.textInput} />
         <input
           type="button"
-          value="Focus the text input"
+          value="Fokus pada masukan teks"
           onClick={this.focusTextInput}
         />
       </div>
@@ -105,11 +105,11 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will assign the `current` property with the DOM element when the component mounts, and assign it back to `null` when it unmounts. `ref` updates happen before `componentDidMount` or `componentDidUpdate` lifecycle methods.
+React akan menetapkan properti `current` menjadi elemen DOM saat komponen dipasang dan menetapkannya kembali menjadi `null` saat dilepas. Pembaruan `ref` terjadi sebelum *lifecycle method* `componentDidMount` atau `componentDidUpdate`.
 
-#### Adding a Ref to a Class Component {#adding-a-ref-to-a-class-component}
+#### Menambahkan *Ref* ke *Class Component* {#adding-a-ref-to-a-class-component}
 
-If we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its `focusTextInput` method manually:
+Jika kita ingin membungkus `CustomTextInput` di atas untuk mensimulasikan peristiwa klik pada masukan teks segera setelah dipasang, kita bisa menggunakan *ref* untuk mendapatkan akses ke input khususnya dan memanggil *method* `focusTextInput` secara manual:
 
 ```javascript{4,8,13}
 class AutoFocusTextInput extends React.Component {
@@ -130,7 +130,7 @@ class AutoFocusTextInput extends React.Component {
 }
 ```
 
-Note that this only works if `CustomTextInput` is declared as a class:
+Perhatikan bahwa ini hanya akan berfungsi jika `CustomTextInput` dideklarasikan sebagai kelas:
 
 ```js{1}
 class CustomTextInput extends React.Component {
@@ -138,9 +138,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-#### Refs and Function Components {#refs-and-function-components}
+#### *Ref* dan *Function Component* {#refs-and-function-components}
 
-**You may not use the `ref` attribute on function components** because they don't have instances:
+**Anda tidak diizinkan untuk menggunakan atribut `ref` dalam *function component*** karena komponen tersebut tidak memiliki instans:
 
 ```javascript{1,8,13}
 function MyFunctionComponent() {
@@ -153,7 +153,7 @@ class Parent extends React.Component {
     this.textInput = React.createRef();
   }
   render() {
-    // This will *not* work!
+    // Ini tidak akan berfungsi!
     return (
       <MyFunctionComponent ref={this.textInput} />
     );
@@ -161,13 +161,13 @@ class Parent extends React.Component {
 }
 ```
 
-You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state.
+Anda harus mengubah komponen menjadi kelas jika Anda membutuhkan *ref* yang merujuk kepadanya, seperti halnya jika Anda membutuhkan *lifecycle method* atau *state*.
 
-You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component:
+Tetapi Anda bisa **menggunakan atribut `ref` di dalam *function component*** selama Anda merujuk ke elemen DOM atau *class component*:
 
 ```javascript{2,3,6,13}
 function CustomTextInput(props) {
-  // textInput must be declared here so the ref can refer to it
+  // textInput harus dideklarasikan di sini agar ref bisa merujuknya
   let textInput = React.createRef();
 
   function handleClick() {
@@ -181,7 +181,7 @@ function CustomTextInput(props) {
         ref={textInput} />
       <input
         type="button"
-        value="Focus the text input"
+        value="Fokus pada masukan teks"
         onClick={handleClick}
       />
     </div>
@@ -189,25 +189,25 @@ function CustomTextInput(props) {
 }
 ```
 
-### Exposing DOM Refs to Parent Components {#exposing-dom-refs-to-parent-components}
+### Mengekspos *Ref* DOM ke Komponen Induk {#exposing-dom-refs-to-parent-components}
 
-In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.
+Pada sebagian kecil kasus, Anda mungkin ingin mendapatkan akses ke simpul DOM anak dari komponen induk. Hal ini tidak disarankan karena akan merusak enkapsulasi komponen, tetapi terkadang berguna untuk memicu fokus atau mengukur ukuran atau posisi simpul DOM anak.
 
-While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components.
+Walau Anda bisa [menambahkan *ref* ke *child component*](#adding-a-ref-to-a-class-component), ini bukan solusi yang ideal, karena Anda hanya akan mendapatkan instans komponen, bukan simpul DOM. Selain itu, hal ini tidak akan berfungsi dengan *function component*.
 
-If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Jika Anda menggunakan React 16.3 atau yang lebih baru, kami sarankan untuk menggunakan [*ref forwarding*](/docs/forwarding-refs.html) untuk kasus semacam ini. ***Ref forwarding* memungkinkan komponen untuk memilih untuk mengekspos semua *ref* komponen anak sebagai miliknya sendiri**. Anda bisa menemukan contoh mendetail tentang cara mengekspos simpul DOM anak ke komponen induk [dalam dokumentasi *ref forwarding*](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
-If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) and explicitly pass a ref as a differently named prop.
+Jika Anda menggunakan React 16.2 atau yang lebih lawas, atau jika Anda membutuhkan lebih banyak fleksibilitas dibandingkan dengan yang disediakan oleh *ref forwarding*, Anda bisa menggunakan [pendekatan alternatif ini](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) dan secara eksplisit mengoper sebuah *ref* sebagai *props* dengan nama yang berbeda.
 
-When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Jika dimungkinkan, kami sarankan untuk tidak mengekspos simpul DOM, walau bisa berguna sebagai jalan keluar. Perhatikan bahwa pendekatan ini membutuhkan tambahan kode pada komponen anak Jika Anda sama sekali tidak memiliki kontrol pada implementasi komponen anak, opsi terakhir Anda adalah menggunakan [`findDOMNode()`](/docs/react-dom.html#finddomnode). Tetapi hal ini tidak disarankan dan akan menjadi *deprecated* dalam [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
-### Callback Refs {#callback-refs}
+### *Callback Ref* {#callback-refs}
 
-React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
+React juga mendukung cara lain untuk menetapkan *ref* yang disebut sebagai *"callback ref"*, yang memberikan kontrol lebih mendetail kapan *ref* akan di-*set* dan di-*unset*.
 
-Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. 
+Alih-alih mengoper atribut `ref` yang dibuat oleh `createRef()`, Anda mengoper sebuah fungsi. Fungsi tersebut menerima instans komponen React atau elemen DOM HTML sebagai argumennya, yang bisa disimpan dan diakses di tempat lain. 
 
-The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
+Contoh berikut mengimplementasikan sebuah pola umum: menggunakan *callback* `ref` untuk menyimpan rujukan ke simpul DOM dalam properti instans.
 
 ```javascript{5,7-9,11-14,19,29,34}
 class CustomTextInput extends React.Component {
@@ -221,19 +221,19 @@ class CustomTextInput extends React.Component {
     };
 
     this.focusTextInput = () => {
-      // Focus the text input using the raw DOM API
+      // Fokus pada input teks menggunakan API DOM mentah
       if (this.textInput) this.textInput.focus();
     };
   }
 
   componentDidMount() {
-    // autofocus the input on mount
+    // autofocus pada input saat mount
     this.focusTextInput();
   }
 
   render() {
-    // Use the `ref` callback to store a reference to the text input DOM
-    // element in an instance field (for example, this.textInput).
+    // Gunakan callback `ref` untuk menyimpan rujukan ke elemen DOM
+    // input teks dalam field instans (misalnya, this.textInput).
     return (
       <div>
         <input
@@ -242,7 +242,7 @@ class CustomTextInput extends React.Component {
         />
         <input
           type="button"
-          value="Focus the text input"
+          value="Fokus pada masukan teks"
           onClick={this.focusTextInput}
         />
       </div>
@@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. Refs are guaranteed to be up-to-date before `componentDidMount` or `componentDidUpdate` fires.
+React akan memanggil *callback* `ref` dengan elemen DOM saat komponen dipasang dan memanggilnya dengan `null` saat dilepas. *Ref* dijamin untuk selalu diperbarui sebelum `componentDidMount` atau `componentDidUpdate` dijalankan.
 
-You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
+Anda bisa mengoper *callback ref* antarkomponen seperti halnya yang bisa Anda lakukan dengan *object ref* yang dibuat dengan `React.createRef()`.
 
 ```javascript{4,13}
 function CustomTextInput(props) {
@@ -275,16 +275,16 @@ class Parent extends React.Component {
 }
 ```
 
-In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the `CustomTextInput` passes the same function as a special `ref` attribute to the `<input>`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `<input>` element in the `CustomTextInput`.
+Pada contoh di atas, `Parent` mengoper *callback ref*-nya sebagai *props* `inputRef` kepada `CustomTextInput` dan `CustomTextInput` mengoper fungsi yang sama sebagai atribut `ref` khusus kepada `<input>`. Hasilnya, `this.inputElement` pada `Parent` akan disetel ke simpul DOM yang sesuai dengan elemen `<input>` pada `CustomTextInput`.
 
-### Legacy API: String Refs {#legacy-api-string-refs}
+### API *Legacy*: *String Ref* {#legacy-api-string-refs}
 
-If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. 
+Jika sebelumnya Anda bekerja dengan React, Anda mungkin sudah mengenal API lawas dengan atribut `ref` berupa string, misalnya `"textInput"`, dan simpul DOM yang diakses dengan `this.refs.textInput`. Kami sarankan untuk tidak melakukannya karena *string ref* memiliki [beberapa masalah](https://github.com/facebook/react/pull/8333#issuecomment-271648615) dan dipertimbangkan sebagai *legacy*, serta **kemungkinan besar akan dihapus dalam salah satu rilis di masa mendatang**. 
 
-> Note
+> Catatan
 >
-> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead.
+> Jika saat ini Anda menggunakan `this.refs.textInput` untuk mengakses *ref*, kami sarankan untuk beralih menggunakan [*callback pattern*](#callback-refs) atau [API `createRef`](#creating-refs).
 
-### Caveats with callback refs {#caveats-with-callback-refs}
+### Kekurangan pada *callback ref* {#caveats-with-callback-refs}
 
-If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases.
+Jika *callback* `ref` didefinisikan sebagai fungsi *inline*, fungsi ini akan dipanggil dua kali dalam proses pembaruan, yang pertama dengan argumen `null`, yang kedua dengan argumen elemen DOM. Ini terjadi karena instans baru dari fungsi akan dibuat dalam setiap proses *render*, karena React harus membersihkan *ref* yang lama dan menyiapkan yang baru. Anda bisa menghindari hal ini dengan mendefinisikan *callback* `ref` sebagau *bound method* pada kelas, tetapi perhatikan bahwa dalam sebagian besar kasus hal ini tidak berpengaruh.

From b90088021daa2a0fdc172574993550d149305651 Mon Sep 17 00:00:00 2001
From: lunmay <28674102+lunmay@users.noreply.github.com>
Date: Thu, 28 Feb 2019 15:25:00 +0100
Subject: [PATCH 03/10] Translated Portals

---
 content/docs/portals.md | 81 +++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 40 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 650121396..82938e44a 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -1,24 +1,24 @@
 ---
 id: portals
-title: Portals
+title: Portal
 permalink: docs/portals.html
 ---
 
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+Portal menyediakan cara utama untuk me-*render* anak ke dalam simpul DOM yang berada di luar hierarki komponen induk.
 
 ```js
 ReactDOM.createPortal(child, container)
 ```
 
-The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
+Argumen pertama (`child`) berupa [anak React yang bisa di-*render*](/docs/react-component.html#render), misalnya sebuah elemen, string, atau *fragment*. Argumen kedua (`container`) merupakan elemen DOM.
 
-## Usage {#usage}
+## Penggunaan {#usage}
 
-Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
+Umumnya saat Anda mengembalikan sebuah elemen dari *method* *render* komponen, elemen tersebut dipasang ke DOM sebagai anak pada simpul induk terdekat:
 
 ```js{4,6}
 render() {
-  // React mounts a new div and renders the children into it
+  // React memasang div baru dan me-render anaknya kepadanya
   return (
     <div>
       {this.props.children}
@@ -27,12 +27,13 @@ render() {
 }
 ```
 
-However, sometimes it's useful to insert a child into a different location in the DOM:
+Akan tetapi terkadang ada gunanya untuk menyisipkan sebuah anak ke lokasi yang berbeda dalam DOM:
 
 ```js{6}
 render() {
-  // React does *not* create a new div. It renders the children into `domNode`.
-  // `domNode` is any valid DOM node, regardless of its location in the DOM.
+  // React *tidak* membuat div baru. React me-render anak ke dalam `domNode`.
+  // `domNode` berupa simpul DOM apa saja yang valid, tidak tergantung pada 
+  // lokasinya dalam DOM.
   return ReactDOM.createPortal(
     this.props.children,
     domNode
@@ -40,21 +41,21 @@ render() {
 }
 ```
 
-A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
+Penggunaan umum untuk portal adalah ketika komponen induk memiliki gaya `overflow: hidden` atau `z-index`, tetapi Anda harus "memisahkan" anak secara visual dari kontainernya. Misalnya pada dialog, *hovercard*, atau *tooltip*.
 
-> Note:
+> Catatan:
 >
-> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
+> Saat bekerja dengan portal, perhatikan bahwa [mengelola fokus papan ketik](/docs/accessibility.html#programmatically-managing-focus) menjadi sangat penting.
 >
-> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
+> Untuk dialog modal, pastikan semua pihak bisa berinteraksi dengannya dengan mengikuti [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## Event Bubbling Through Portals {#event-bubbling-through-portals}
+## *Event Bubbling* lewat Portal {#event-bubbling-through-portals}
 
-Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
+Walau sebuah portal bisa berada di mana saja dalam pohon DOM, portal tersebut berperilaku seperti halnya anak React yang normal. Fitur seperti *context work* bekerja sama persis tanpa tergantung apakah sebuah anak adalah sebuah portal, karena portal masih berada dalam *pohon React* tanpa memandang posisinya dalam *pohon DOM*.
 
-This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
+Ini mencakup *event bubbling*. Sebuah *event* yang dijalankan dari dalam portal akan dipropagasikan ke induknya dalam *pohon React* yang memuatnya, walau elemen tersebut bukan merupakan induk dalam *pohon DOM*. Misalnya pada struktur HTML berikut:
 
 ```html
 <html>
@@ -65,10 +66,10 @@ This includes event bubbling. An event fired from inside a portal will propagate
 </html>
 ```
 
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
+Komponen `Parent` pada `#app-root` akan bisa menangkap *event bubbling* yang belum ditangkap dari simpul sederajat `#modal-root`.
 
 ```js{28-31,42-49,53,61-63,70-71,74}
-// These two containers are siblings in the DOM
+// Kedua kontainer berikut sederajat dalam DOM
 const appRoot = document.getElementById('app-root');
 const modalRoot = document.getElementById('modal-root');
 
@@ -79,14 +80,14 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
-    // The portal element is inserted in the DOM tree after
-    // the Modal's children are mounted, meaning that children
-    // will be mounted on a detached DOM node. If a child
-    // component requires to be attached to the DOM tree
-    // immediately when mounted, for example to measure a
-    // DOM node, or uses 'autoFocus' in a descendant, add
-    // state to Modal and only render the children when Modal
-    // is inserted in the DOM tree.
+    // Elemen portal disisipkan dalam pohon DOM setelah
+    // anak dari Modal dipasang, yang berarti anak tersebut
+    // akan dipasang pada simpul DOM yang terpisah. Jika 
+    // komponen anak harus disematkan ke dalam pohon DOM
+    // segera setelah dipasang, misalnya untuk mengukur dimensi
+    // simpul DOM, atau menggunakan 'autoFocus' pada turunannya, 
+    // tambahkan state pada Modal dan hanya render para anak saat
+    // Modal disisipkan dalam pohon DOM.
     modalRoot.appendChild(this.el);
   }
 
@@ -110,9 +111,9 @@ class Parent extends React.Component {
   }
 
   handleClick() {
-    // This will fire when the button in Child is clicked,
-    // updating Parent's state, even though button
-    // is not direct descendant in the DOM.
+    // Ini akan dijalankan ketika tombol pada Child diklik,
+    // memperbarui state Parent, walau tombol tersebut
+    // bukan turunan langsung dalam DOM.
     this.setState(state => ({
       clicks: state.clicks + 1
     }));
@@ -121,12 +122,12 @@ class Parent extends React.Component {
   render() {
     return (
       <div onClick={this.handleClick}>
-        <p>Number of clicks: {this.state.clicks}</p>
+        <p>Jumlah klik: {this.state.clicks}</p>
         <p>
-          Open up the browser DevTools
-          to observe that the button
-          is not a child of the div
-          with the onClick handler.
+          Buka DevTools browser
+          untuk mengamati bahwa tombol
+          bukan anak dari div
+          pada handler onClick.
         </p>
         <Modal>
           <Child />
@@ -137,11 +138,11 @@ class Parent extends React.Component {
 }
 
 function Child() {
-  // The click event on this button will bubble up to parent,
-  // because there is no 'onClick' attribute defined
+  // Event klik pada tombol ini akan meluap ke induk,
+  // karena tidak ada atribut 'onClick' yang didefinisikan
   return (
     <div className="modal">
-      <button>Click</button>
+      <button>Klik</button>
     </div>
   );
 }
@@ -149,6 +150,6 @@ function Child() {
 ReactDOM.render(<Parent />, appRoot);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
 
-Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
+Menangkap *event bubbling* yang meluap dari portal pada komponen induk mengizinkan pengembangan abstraksi yang lebih fleksibel yang tidak mengandalkan portal. Misalnya jika Anda me-*render* komponen `<Modal />`, induk bisa menangkap *event*-nya tanpa tergantung apakah diimplementasikan dengan portal atau tidak.

From fe6c8d1f9cd2e1b36669f8a0ee9f0c3fd7e46aa2 Mon Sep 17 00:00:00 2001
From: lunmay <28674102+lunmay@users.noreply.github.com>
Date: Thu, 28 Feb 2019 16:09:11 +0100
Subject: [PATCH 04/10] Translated React Without ES6

---
 content/docs/react-without-es6.md | 91 ++++++++++++++++---------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
index 8b54d0981..720c8d602 100644
--- a/content/docs/react-without-es6.md
+++ b/content/docs/react-without-es6.md
@@ -1,36 +1,36 @@
 ---
 id: react-without-es6
-title: React Without ES6
+title: React Tanpa ES6
 permalink: docs/react-without-es6.html
 ---
 
-Normally you would define a React component as a plain JavaScript class:
+Umumnya Anda mendefinisikan komponen React sebagai kelas JavaScript biasa:
 
 ```javascript
 class Greeting extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Halo {this.props.name}</h1>;
   }
 }
 ```
 
-If you don't use ES6 yet, you may use the `create-react-class` module instead:
+Jika Anda belum menggunakan ES6, Anda bisa menggunakan modul `create-react-class`:
 
 
 ```javascript
 var createReactClass = require('create-react-class');
 var Greeting = createReactClass({
   render: function() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Halo {this.props.name}</h1>;
   }
 });
 ```
 
-The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
+API untuk kelas ES6 mirip dengan `createReactClass()`, dengan beberapa pengecualian.
 
-## Declaring Default Props {#declaring-default-props}
+## Mendeklarasikan *Props* *Default* {#declaring-default-props}
 
-With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
+Dengan kelas dan fungsi ES6, `defaultProps` didefinisikan sebagai properti komponennya sendiri:
 
 ```javascript
 class Greeting extends React.Component {
@@ -38,17 +38,17 @@ class Greeting extends React.Component {
 }
 
 Greeting.defaultProps = {
-  name: 'Mary'
+  name: 'Maria'
 };
 ```
 
-With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
+Dengan `createReactClass()`, Anda harus mendefinisikan `getDefaultProps()` sebagai fungsi pada objek yang dioperkan:
 
 ```javascript
 var Greeting = createReactClass({
   getDefaultProps: function() {
     return {
-      name: 'Mary'
+      name: 'Maria'
     };
   },
 
@@ -57,9 +57,9 @@ var Greeting = createReactClass({
 });
 ```
 
-## Setting the Initial State {#setting-the-initial-state}
+## Menyetel *State* Awal {#setting-the-initial-state}
 
-In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
+Pada kelas ES6, Anda bisa mendefinisikan *state* awal dengan menetapkan `this.state` pada konstruktor:
 
 ```javascript
 class Counter extends React.Component {
@@ -71,7 +71,7 @@ class Counter extends React.Component {
 }
 ```
 
-With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
+Dengan `createReactClass()`, Anda harus menyediakan *method* `getInitialState` terpisah yang mengembalikan *state* awal:
 
 ```javascript
 var Counter = createReactClass({
@@ -82,16 +82,16 @@ var Counter = createReactClass({
 });
 ```
 
-## Autobinding {#autobinding}
+## *Autobinding* {#autobinding}
 
-In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
+Pada komponen React yang dideklarasikan sebagai kelas ES6, *method* mengikuti semantik yang sama seperti kelas ES6 reguler. Ini berarti *method* tersebut tidak secara otomatis mem-*bind* `this` kepada instans. Anda harus secara eksplisit menggunakan `.bind(this)` pada konstruktor:
 
 ```javascript
 class SayHello extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {message: 'Hello!'};
-    // This line is important!
+    this.state = {message: 'Halo!'};
+    // Baris berikut penting!
     this.handleClick = this.handleClick.bind(this);
   }
 
@@ -100,22 +100,23 @@ class SayHello extends React.Component {
   }
 
   render() {
-    // Because `this.handleClick` is bound, we can use it as an event handler.
+    // Karena `this.handleClick` telah di-bind, kita bisa menggunakannya
+    // sebagai event handler.
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Ucapkan halo
       </button>
     );
   }
 }
 ```
 
-With `createReactClass()`, this is not necessary because it binds all methods:
+Dengan `createReactClass()`, hal tersebut tidak diperlukan karena semua *method* akan di-*bind*:
 
 ```javascript
 var SayHello = createReactClass({
   getInitialState: function() {
-    return {message: 'Hello!'};
+    return {message: 'Halo!'};
   },
 
   handleClick: function() {
@@ -125,26 +126,26 @@ var SayHello = createReactClass({
   render: function() {
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Ucapkan halo
       </button>
     );
   }
 });
 ```
 
-This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
+Ini berarti penulisan dengan kelas ES6 disertai dengan kode *boilerplate* untuk *event handler* tetapi manfaatnya adalah kinerja yang sedikit lebih baik dalam aplikasi yang besar.
 
-If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
+Jika kode *boilerplate* sangat tidak menarik bagi Anda, Anda bisa mengaktifkan sintaksis [*Class Property*](https://babeljs.io/docs/plugins/transform-class-properties/) yang bersifat **eksperimental** dengan Babel:
 
 
 ```javascript
 class SayHello extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {message: 'Hello!'};
+    this.state = {message: 'Halo!'};
   }
-  // WARNING: this syntax is experimental!
-  // Using an arrow here binds the method:
+  // PERINGATAN: sintalsis ini bersifat eksperimental!
+  // Menggunakan *arrow* akan mem-bind method:
   handleClick = () => {
     alert(this.state.message);
   }
@@ -152,34 +153,34 @@ class SayHello extends React.Component {
   render() {
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Ucapkan halo
       </button>
     );
   }
 }
 ```
 
-Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
+Perhatikan bahwa sintaksis di atas bersifat **eksperimental** dan sintaksis mungkin akan berubah, atau proposal ini tidak akan disertakan dalam bahasa.
 
-If you'd rather play it safe, you have a few options:
+Jika Anda ingin bermain pada area yang aman, Anda memiliki beberapa opsi:
 
-* Bind methods in the constructor.
-* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
-* Keep using `createReactClass`.
+* Mem-*bind* *method* dalam konstruktor.
+* Gunakan *arrow function*, misalnya `onClick={(e) => this.handleClick(e)}`.
+* Terus gunakan `createReactClass`.
 
-## Mixins {#mixins}
+## Mixin {#mixins}
 
->**Note:**
+>**Catatan:**
 >
->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
+>ES6 diluncurkan tanpa adanya dukungan *mixin*. Oleh sebab itu, tidak ada dukungan untuk *mixin* saat Anda menggunakan React dengan kelas ES6.
 >
->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
+>**Kami juga menemukan banyak masalah pada kode dasar yang menggunakan *mixin*, [dan tidak menyarankan untuk menggunakannya untuk kode yang baru](/blog/2016/07/13/mixins-considered-harmful.html).**
 >
->This section exists only for the reference.
+>Bagian berikut hanya digunakan untuk rujukan.
 
-Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that.
+Terkadang komponen yang sangat berbeda bisa berbagi fungsionalitas yang sama. Hal ini terkadang disebut sebagai [*cross-cutting concern*](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` memungkinkan Anda untuk menggunakan sistem `mixin` yang bersifat *legacy* untuk hal tersebut.
 
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
+Salah satu kasus penggunaan yang umum adalah sebuah komponen ingin memperbarui dirinya sendiri secara periodik. Sangat mudah untuk menggunakan `setInterval()`, tetapi sangat penting untuk membatalkan interval jika Anda tidak membutuhkannya lagi untuk menghemat memori. React menyediakan [*lifecycle method*](/docs/react-component.html#the-component-lifecycle) yang bisa memberi tahu Anda kapan komponen akan diciptakan atau dihancurkan. Sebagai contoh, mari kita buat *mixin* yang sederhana yang menggunakan *method* berikut untuk menyediakan fungsi `setInterval()` yang mudah, yang akan dibersihkan secara otomatis ketika komponen Anda dihancurkan.
 
 ```javascript
 var SetIntervalMixin = {
@@ -197,12 +198,12 @@ var SetIntervalMixin = {
 var createReactClass = require('create-react-class');
 
 var TickTock = createReactClass({
-  mixins: [SetIntervalMixin], // Use the mixin
+  mixins: [SetIntervalMixin], // Gunakan mixin
   getInitialState: function() {
     return {seconds: 0};
   },
   componentDidMount: function() {
-    this.setInterval(this.tick, 1000); // Call a method on the mixin
+    this.setInterval(this.tick, 1000); // Panggil method pada mixin
   },
   tick: function() {
     this.setState({seconds: this.state.seconds + 1});
@@ -210,7 +211,7 @@ var TickTock = createReactClass({
   render: function() {
     return (
       <p>
-        React has been running for {this.state.seconds} seconds.
+        React telah berjalan selama {this.state.seconds} detik.
       </p>
     );
   }
@@ -222,4 +223,4 @@ ReactDOM.render(
 );
 ```
 
-If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
+Jika komponen menggunakan beberapa *mixin* dan beberapa *mixin* mendefinisikan *lifecycle method* yang sama (beberapa *mixin* ingin melakukan pembersihan ketika komponen dihancurkan), semua *lifecycle method* dijamin untuk dipanggil. *Method* yang didefiniskan pada *mixin* dijalankan secara berurutan sesuai dengan dengan proses pendaftarannya, diikuti dengan pemanggilan *method* pada komponen.

From 2289fc45bb7c63f3eefff340b365d38bf5927a7e Mon Sep 17 00:00:00 2001
From: lunmay <28674102+lunmay@users.noreply.github.com>
Date: Thu, 28 Feb 2019 17:05:36 +0100
Subject: [PATCH 05/10] Translated Uncontrolled Component

---
 content/docs/uncontrolled-components.md | 40 ++++++++++++-------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index 10b6eab28..73d55eebe 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -1,14 +1,14 @@
 ---
 id: uncontrolled-components
-title: Uncontrolled Components
+title: Uncontrolled Component
 permalink: docs/uncontrolled-components.html
 ---
 
-In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
+Pada sebagian besar kasus, kami sarankan untuk menggunakan [*controlled component*](/docs/forms.html) untuk mengimpementasikan *form*. Pada *controlled component*, *form data* ditangani oleh komponen React. Cara alternatifnya adalah menggunakan *uncontrolled component*, dengan *form data* ditangani oleh DOM-nya sendiri.
 
-To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
+Untuk menulis *uncontrolled component*, alih-alih menulis *event handler* untuk setiap pembaruan *state*, Anda bisa [menggunakan *ref*](/docs/refs-and-the-dom.html) untuk mendapatkan nilai *form* dari DOM.
 
-For example, this code accepts a single name in an uncontrolled component:
+Misalnya, kode berikut menerima sebuah nama dari sebuah *uncontrolled component*:
 
 ```javascript{5,9,18}
 class NameForm extends React.Component {
@@ -19,7 +19,7 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.input.current.value);
+    alert('Sebuah nama telah dikirim: ' + this.input.current.value);
     event.preventDefault();
   }
 
@@ -27,56 +27,56 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
+          Nama:
           <input type="text" ref={this.input} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Kirim" />
       </form>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
-Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
+Oleh karena *uncontrolled component* menyimpan sumber kebenaran dalam DOM, terkadang lebih mudah untuk mengintegrasikan kode React dan non-React jika menggunakan *uncontrolled component*. Ini juga berarti lebih sedikit kode jika Anda menginginkan solusi cepat walau tak rapi. Selain itu pada umumnya Anda harus menggunakan *controlled component*.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+Jika masih belum jelas jenis komponen mana yang harus Anda gunakan untuk situasi tertentu, mungkin [artikel tentang *controlled input* versus *uncontrolled input*](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) bisa membantu.
 
-### Default Values {#default-values}
+### Nilai *Default* {#default-values}
 
-In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
+Pada *lifecycle rendering* React, atribut `value` pada elemen *form* akan menimpa nilai pada DOM. Dengan *uncontrolled component*, sering kali Anda menginginkan React untuk menentukan nilai awal tetapi pembaruan berikutnya dilakukan secara *uncontrolled*. Untuk menangani kasus ini, Anda bisa menentukan atribut `defaultValue` alih-alih menggunakan `value`.
 
 ```javascript{7}
 render() {
   return (
     <form onSubmit={this.handleSubmit}>
       <label>
-        Name:
+        Nama:
         <input
-          defaultValue="Bob"
+          defaultValue="Budi"
           type="text"
           ref={this.input} />
       </label>
-      <input type="submit" value="Submit" />
+      <input type="submit" value="Kirim" />
     </form>
   );
 }
 ```
 
-Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
+Ini juga berlaku pada dukungan `defaultChecked` untuk `<input type="checkbox">` dan `<input type="radio">`, serta dukungan `defaultValue` untuk `<select>` dan `<textarea>`.
 
-## The file input Tag {#the-file-input-tag}
+## *Tag* *file input* {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+Pada HTML, sebuah `<input type="file">` memungkinkan pengguna untuk memilih satu atau beberapa flle dari media penyimpanan mereka untuk diunggah ke server atau dimanipulasi dengan JavaScript lewat [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
+Dalam React, sebuah `<input type="file" />` selalu merupakan *uncontrolled component* karena nilainya hanya bisa disetel oleh pengguna, bukan oleh kode program.
 
-You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
+Anda harus menggunakan File API untuk berinteraksi dengan *file*. Contoh berikut menunjukkan cara membuat [*ref* ke simpul DOM](/docs/refs-and-the-dom.html) untuk mengakses *file* dalam *submit handler*:
 
 `embed:uncontrolled-components/input-type-file.js`
 

From a1a23585e49dab0159d27bab533ccbb1b84ed1ee Mon Sep 17 00:00:00 2001
From: lunmay <28674102+lunmay@users.noreply.github.com>
Date: Fri, 1 Mar 2019 00:13:20 +0100
Subject: [PATCH 06/10] Translated Static Type Checking

---
 content/docs/static-type-checking.md | 201 ++++++++++++++-------------
 1 file changed, 101 insertions(+), 100 deletions(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index 074e7f139..c4bb8eae0 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -1,44 +1,44 @@
 ---
 id: static-type-checking
-title: Static Type Checking
+title: Pengecekan Static Type
 permalink: docs/static-type-checking.html
 prev: typechecking-with-proptypes.html
 next: refs-and-the-dom.html
 ---
 
-Static type checkers like [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases.
+Pengecekan *static type* seperti [Flow](https://flow.org/) dan [TypeScript](https://www.typescriptlang.org/) mengidentifikasi jenis masalah tertentu bahkan sebelum kode dijalankan. Pengecekan tersebut juga bisa meningkatkan alur kerja pengembang dengan menambahkan fitur seperti pelengkapan kode secara otomatis. Dengan alasan ini, kami sarankan untuk menggunakan Flow atau TypeScript alih-alih menggunakan `PropTypes` untuk kode program berukuran besar.
 
 ## Flow {#flow}
 
-[Flow](https://flow.org/) is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. You can read an [introduction to Flow](https://flow.org/en/docs/getting-started/) to learn its basics.
+[Flow](https://flow.org/) merupakan pengecek *static type* untuk kode JavaScript. Pengecek ini dikembangkan di Facebook dan sering digunakan bersama React. Pengecek ini memungkinkan Anda untuk menganotasi variabel, fungsi, dan komponen React menggunakan sintaksis khusus dan menemukan kesalahan secara dini. Anda bisa membaca [pengenalan Flow](https://flow.org/en/docs/getting-started/) untuk mempelajari dasar-dasarnya.
 
-To use Flow, you need to:
+Untuk menggunakannya, Anda harus:
 
-* Add Flow to your project as a dependency.
-* Ensure that Flow syntax is stripped from the compiled code.
-* Add type annotations and run Flow to check them.
+* Menambahkan Flow ke proyek Anda sebagai *dependency*.
+* Memastikan sintaksis Flow dihapus dari kode hasil dikompilasi.
+* Menambahkan *type annotation* dan menjalankan Flow untuk mengeceknya.
 
-We will explain these steps below in detail.
+Kami akan menjelaskan langkah-langkah tersebut secara mendetail.
 
-### Adding Flow to a Project {#adding-flow-to-a-project}
+### Menambahkan Flow ke Project {#adding-flow-to-a-project}
 
-First, navigate to your project directory in the terminal. You will need to run the following command:
+Pertama-tama, buka direktori proyek Anda di terminal. Anda akan harus menjalankan perintah berikut:
 
-If you use [Yarn](https://yarnpkg.com/), run:
+Jika menggunakan [Yarn](https://yarnpkg.com/), jalankan:
 
 ```bash
 yarn add --dev flow-bin
 ```
 
-If you use [npm](https://www.npmjs.com/), run:
+Jika menggunakan [npm](https://www.npmjs.com/), jalankan:
 
 ```bash
 npm install --save-dev flow-bin
 ```
 
-This command installs the latest version of Flow into your project.
+Perintah tersebut akan menginstal versi terbaru Flow ke proyek Anda.
 
-Now, add `flow` to the `"scripts"` section of your `package.json` to be able to use this from the terminal:
+Kini, tambahkan `flow` ke bagian `"scripts"` pada `package.json` Anda untuk bisa menjalankannya dari terminal:
 
 ```js{4}
 {
@@ -51,53 +51,53 @@ Now, add `flow` to the `"scripts"` section of your `package.json` to be able to
 }
 ```
 
-Finally, run one of the following commands:
+Terakhir, jalankan salah satu dari perintah berikut:
 
-If you use [Yarn](https://yarnpkg.com/), run:
+Jika menggunakan [Yarn](https://yarnpkg.com/), jalankan:
 
 ```bash
 yarn run flow init
 ```
 
-If you use [npm](https://www.npmjs.com/), run:
+Jika menggunakan [npm](https://www.npmjs.com/), jalankan:
 
 ```bash
 npm run flow init
 ```
 
-This command will create a Flow configuration file that you will need to commit.
+Perintah tersebut akan membuat konfigurasi Flow yang harus Anda sertakan dalam *commit*.
 
-### Stripping Flow Syntax from the Compiled Code {#stripping-flow-syntax-from-the-compiled-code}
+### Menghapus Sintaksis Flow dari Kode Hasil Kompilasi {#stripping-flow-syntax-from-the-compiled-code}
 
-Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser.
+Flow memperluas bahasa JavaScript dengan sintaksis khusus untuk *type annotation*. Akan tetapi browser tidak mengenal sintaksis ini, jadi kita harus memastikan sintaksis tersebut dihapus dari bundel JavaScript hasil kompilasi yang akan dikirim ke browser.
 
-The exact way to do this depends on the tools you use to compile JavaScript.
+Cara yang benar untuk melakukannya tergantung pada peralatan yang Anda gunakan untuk mengompilasi JavaScript.
 
-#### Create React App {#create-react-app}
+#### *Create React App* {#create-react-app}
 
-If your project was set up using [Create React App](https://github.com/facebookincubator/create-react-app), congratulations! The Flow annotations are already being stripped by default so you don't need to do anything else in this step.
+Jika proyek Anda disiapkan menggunakan [*Create React App*](https://github.com/facebookincubator/create-react-app), maka kami ucapkan selamat! Anotasi Flow akan dihapus secara *default* dan tidak ada yang perlu dilakukan pada langkah ini.
 
 #### Babel {#babel}
 
->Note:
+>Catatan:
 >
->These instructions are *not* for Create React App users. Even though Create React App uses Babel under the hood, it is already configured to understand Flow. Only follow this step if you *don't* use Create React App.
+>Petunjuk berikut *bukan* ditujukan untuk pengguna *Create React App*. Walau pengguna *Create React App* menggunakan Babel di balik layar, Babel tersebut telah dikonfigurasi untuk memahami Flow. Hanya ikuti langkah berikut jika Anda *tidak* menggunakan *Create React App*.
 
-If you manually configured Babel for your project, you will need to install a special preset for Flow.
+Jika Babel dikonfigurasi secara manual untuk proyek Anda, Anda harus menginstal *preset* khusus untuk Flow.
 
-If you use Yarn, run:
+Jika menggunakan Yarn, jalankan:
 
 ```bash
 yarn add --dev babel-preset-flow
 ```
 
-If you use npm, run:
+Jika menggunakan npm, jalankan:
 
 ```bash
 npm install --save-dev babel-preset-flow
 ```
 
-Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs/usage/babelrc/). For example, if you configure Babel through `.babelrc` file, it could look like this:
+Kemudian tambahkan *preset* `flow` ke [konfigurasi Babel ](https://babeljs.io/docs/usage/babelrc/) Anda. Misalnya, jika Babel dikonfigurasi lewat *file* `.babelrc`, tampilannya mungkin seperti berikut:
 
 ```js{3}
 {
@@ -108,101 +108,101 @@ Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs
 }
 ```
 
-This will let you use the Flow syntax in your code.
+Ini memungkinkan Anda untuk menggunakan sintaksis Flow pada kode Anda.
 
->Note:
+>Catatan:
 >
->Flow does not require the `react` preset, but they are often used together. Flow itself understands JSX syntax out of the box.
+>Flow tidak membutuhkan *preset* `react`, tetapi keduanya sering digunakan secara bersama. Flow sendiri memahami sintaksis JSX secara mandiri.
 
-#### Other Build Setups {#other-build-setups}
+#### *Setup Build* Lainnya {#other-build-setups}
 
-If you don't use either Create React App or Babel, you can use [flow-remove-types](https://github.com/flowtype/flow-remove-types) to strip the type annotations.
+Jika Anda tidak menggunakan *Create React App* atau Babel, Anda bisa menggunakan [flow-remove-types](https://github.com/flowtype/flow-remove-types) untuk menghapus *type annotation*.
 
-### Running Flow {#running-flow}
+### Menjalankan Flow {#running-flow}
 
-If you followed the instructions above, you should be able to run Flow for the first time.
+Jika Anda mengikuti petunjuk di atas, Anda bisa menjalankan Flow pertama kali.
 
 ```bash
 yarn flow
 ```
 
-If you use npm, run:
+Jika menggunakan npm, jalankan:
 
 ```bash
 npm run flow
 ```
 
-You should see a message like:
+Seharusnya Anda akan melihat pesan seperti:
 
 ```
 No errors!
 ✨  Done in 0.17s.
 ```
 
-### Adding Flow Type Annotations {#adding-flow-type-annotations}
+### Menambahkan *Type Annotation* Flow {#adding-flow-type-annotations}
 
-By default, Flow only checks the files that include this annotation:
+Secara default, Flow hanya mengecek *file* yang disertakan anotasi berikut:
 
 ```js
 // @flow
 ```
 
-Typically it is placed at the top of a file. Try adding it to some files in your project and run `yarn flow` or `npm run flow` to see if Flow already found any issues.
+Umumnya anotasi tersebut ditempatkan di bagian atas *file*. Coba tambahkan anotasi tersebut ke beberapa *file* dalam proyek dan jalankan `yarn flow` atau `npm run flow` untuk melihat apakah Flow sudah menemukan masalah.
 
-There is also [an option](https://flow.org/en/docs/config/options/#toc-all-boolean) to force Flow to check *all* files regardless of the annotation. This can be too noisy for existing projects, but is reasonable for a new project if you want to fully type it with Flow.
+Tersedia juga [sebuah *opsi*](https://flow.org/en/docs/config/options/#toc-all-boolean) untuk memaksa Flow untuk mengecek *semua* *file* tanpa melihat adanya anotasi. Ini bisa berakibat terlalu "ramai" untuk proyek yang sudah ada, tetapi cukup bagi proyek baru jika Anda ingin menggunakan Flow secara lengkap.
 
-Now you're all set! We recommend to check out the following resources to learn more about Flow:
+Kini Anda sudah siap! Kami sarankan untuk memeriksa sumber daya berikut untuk mempelajari lebih lanjut tentang Flow:
 
-* [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/)
-* [Flow Documentation: Editors](https://flow.org/en/docs/editors/)
-* [Flow Documentation: React](https://flow.org/en/docs/react/)
-* [Linting in Flow](https://medium.com/flow-type/linting-in-flow-7709d7a7e969)
+* [Dokumentasi Flow: *Type Annotation*](https://flow.org/en/docs/types/)
+* [Dokumentasi Flow: Editor](https://flow.org/en/docs/editors/)
+* [Dokumentasi Flow: React](https://flow.org/en/docs/react/)
+* [*Linting* dalam Flow](https://medium.com/flow-type/linting-in-flow-7709d7a7e969)
 
 ## TypeScript {#typescript}
 
-[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler. Being a typed language, TypeScript can catch errors and bugs at build time, long before your app goes live. You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
+[TypeScript](https://www.typescriptlang.org/) merupakan bahasa pemrograman yang dikembangkan oleh Microsoft. Bahasa ini merupakan *superset* dari JavaScript dan menyertakan kompilernya sendiri. Oleh karena TypeScript adalah *typed language*, bahasa ini bisa menangkap kesalahan dan *bug* pada saat proses *build*, jauh sebelum aplikasi Anda tampil untuk para pemirsa. Anda bisa mempelajari lebih lanjut tentang penggunaan TypeScript dengan React [di sini](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
 
-To use TypeScript, you need to:
-* Add TypeScript as a dependency to your project
-* Configure the TypeScript compiler options
-* Use the right file extensions
-* Add definitions for libraries you use
+Untuk menggunakan TypeScript, Anda harus:
+* Menambahkan TypeScript sebagai *dependency* ke proyek Anda
+* Mengonfigurasi opsi kompiler TypeScript
+* Menggunakan ektensi *file* yang benar
+* Menambahkan definisi untuk *library* yang Anda gunakan
 
-Let's go over these in detail.
+Mari kita jelajahi secara mendetail.
 
-### Using TypeScript with Create React App {#using-typescript-with-create-react-app}
+### Menggunakan TypeScript dengan *Create React App* {#using-typescript-with-create-react-app}
 
-Create React App supports TypeScript out of the box.
+*Create React App* mendukung TypeScript secara langsung.
 
-To create a **new project** with TypeScript support, run:
+Untuk membuat **proyek baru** dengan dukungan TypeScript, jalankan:
 
 ```bash
 npx create-react-app my-app --typescript
 ```
 
-You can also add it to an **existing Create React App project**, [as documented here](https://facebook.github.io/create-react-app/docs/adding-typescript).
+Anda juga bisa menambahkan TypeScript ke **proyek *Create React App* yang sudah ada**, [seperti yang didokumentasikan di sini](https://facebook.github.io/create-react-app/docs/adding-typescript).
 
->Note:
+>Catatan:
 >
->If you use Create React App, you can **skip the rest of this page**. It describes the manual setup which doesn't apply to Create React App users.
+>Jika Anda menggunakan *Create React App*, Anda bisa melewati **sisa halaman ini**. Sisa halaman ini menjelaskan penyiapan manual yang tidak berlaku untuk pengguna *Create React App*.
 
 
-### Adding TypeScript to a Project {#adding-typescript-to-a-project}
-It all begins with running one command in your terminal.
+### Menambahkan TypeScript ke Proyek {#adding-typescript-to-a-project}
+Semuanya dimulai dengan menjalankan satu perintah di terminal Anda.
 
-If you use [Yarn](https://yarnpkg.com/), run:
+Jika menggunakan [Yarn](https://yarnpkg.com/), jalankan:
 
 ```bash
 yarn add --dev typescript
 ```
 
-If you use [npm](https://www.npmjs.com/), run:
+Jika menggunakan  [npm](https://www.npmjs.com/), jalankan:
 
 ```bash
 npm install --save-dev typescript
 ```
 
-Congrats! You've installed the latest version of TypeScript into your project. Installing TypeScript gives us access to the `tsc` command. Before configuration, let's add `tsc` to the "scripts" section in our `package.json`:
+Selamat! Anda telah menginstal versi terbaru TypeScript ke proyek Anda. Instalasi TypeScript memberikan akses ke perintah `tsc`. Sebelum mengonfigurasi, mari tambahkan `tsc` ke bagian "scripts" pada `package.json`:
 
 ```js{4}
 {
@@ -215,27 +215,27 @@ Congrats! You've installed the latest version of TypeScript into your project. I
 }
 ```
 
-### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler}
-The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file:
+### Mengonfigurasi Kompiler TypeScript {#configuring-the-typescript-compiler}
+Kompiler tidak akan membantu kita hingga kita memberi tahu apa yang harus kompiler lakukan. Pada TypeScript, aturan ini didefinisikan pada *file* khusus yang diberi nama `tsconfig.json`. Untuk membuat *file* ini:
 
-If you use [Yarn](https://yarnpkg.com/), run:
+Jika menggunakan [Yarn](https://yarnpkg.com/), jalankan:
 
 ```bash
 yarn run tsc --init
 ```
 
-If you use [npm](https://www.npmjs.com/), run:
+Jika menggunakan [npm](https://www.npmjs.com/), jalankan:
 
 ```bash
 npx tsc --init
 ```
 
-Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+Pada `tsconfig.json` yang baru dibuat, Anda bisa melihat banyak opsi yang bisa dikonfigurasi untuk kompiler. Untuk deskripsi mendetail tentang semua opsi kunjungi [halaman ini](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
 
-Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output.
+Dari sekian banyak opsi, mari kita lihat opsi `rootDir` dan `outDir`. Awalnya, kompiler akan mengambil *file* TypeScript dan menciptakan *file* JavaScript. Akan tetapi kita tidak ingin mencampur aduk *file* sumber dengan *file* keluaran yang diciptakan..
 
-We'll address this in two steps:
-* Firstly, let's arrange our project structure like this. We'll place all our source code in the `src` directory.
+Kita akan mengatasi masalah ini dalam dua langkah:
+* Pertama-tama, mari kita susun struktur proyek kita seperti berikut. Kita akan tempatkan semua kode sumber dalam direktori `src`.
 
 ```
 ├── package.json
@@ -244,7 +244,7 @@ We'll address this in two steps:
 └── tsconfig.json
 ```
 
-* Next, we'll tell the compiler where our source code is and where the output should go.
+* Berikutnya, kita akan memberi tahu kompiler letak kode sumber kita dan tempat keluaran akan disimpan.
 
 ```js{6,7}
 // tsconfig.json
@@ -259,40 +259,41 @@ We'll address this in two steps:
 }
 ```
 
-Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started.
+Kini, jika kita menjalankan skrip *build*, maka kompiler akan menghasilkan kode JavaScript ke *folder* `build`. [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) menyediakan `tsconfig.json` dengan sekumpulan aturan yang layak bagi Anda untuk memulai.
 
-Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`.
+Secara umum Anda tidak ingin menyimpan kode JavaScript yang dihasilkan dalam sistem *source control* Anda, jadi pastikan untuk menambahkan *folder* *build* ke *file* `.gitignore`.
 
-### File extensions {#file-extensions}
-In React, you most likely write your components in a `.js` file. In TypeScript we have 2 file extensions:
+### Ekstensi *file* {#file-extensions}
+Dalam React, kemungkinan besar Anda menulis komponen pada *file* `.js`. Dalam TypeScript kita memiliki 2 ekstensi *file*:
 
-`.ts` is the default file extension while `.tsx` is a special extension used for files which contain `JSX`.
+* `.ts` sebagai ekstensi *default*, dan
+* `.tsx` yang merupakan ekstensi khusus yang digunakan untuk file yang mengandung `JSX`.
 
-### Running TypeScript {#running-typescript}
+### Menjalankan TypeScript {#running-typescript}
 
-If you followed the instructions above, you should be able to run TypeScript for the first time.
+Jika Anda mengikuti petunjuk di atas, seharusnya Anda bisa menjalankan TypeScript untuk pertama kali.
 
 ```bash
 yarn build
 ```
 
-If you use npm, run:
+Jika menggunakan npm, jalankan:
 
 ```bash
 npm run build
 ```
 
-If you see no output, it means that it completed successfully.
+Jika tidak melihat keluaran, berarti prosesnya selesai dengan sukses.
 
 
-### Type Definitions {#type-definitions}
-To be able to show errors and hints from other packages, the compiler relies on declaration files. A declaration file provides all the type information about a library. This enables us to use javascript libraries like those on npm in our project. 
+### *Type Definition* {#type-definitions}
+Untuk bisa melihat kesalahan dan petunjuk dari *package* lainnya, kompiler mengandalkan *file* deklarasi. *File* deklarasi menyediakan seluruh informasi *type* tentang sebuah *library*. Ini memungkinkan kita untuk menggunakan *library* JavaScript, misalnya dari npm, dalam proyek kita.
 
-There are two main ways to get declarations for a library:
+Ada dua cara utama untuk mendapatkan deklarasi sebuah *library*:
 
-__Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field.
+__Dibundel__ - *Library* membundel *file* deklarasinya sendiri. Ini baik sekali bagi kita, karena yang perlu kita lakukan adalah menginstal *library* tersebut, dan kita bisa langsung menggunakannya. Untuk memeriksa apakah *library* memiliki *type* yang dibundel, cari *file* bernama `index.d.ts` dalam proyeknya. Beberapa *library* menentukannya dalam *file* `package.json` mereka, di bawah *field* `typings` atau `types`.
 
-__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped is a huge repository of declarations for libraries that don't bundle a declaration file. The declarations are crowd-sourced and managed by Microsoft and open source contributors. React for example doesn't bundle its own declaration file. Instead we can get it from DefinitelyTyped. To do so enter this command in your terminal.
+__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped adalah repositori raksasa berisi deklarasi *library* yang tidak membundel *file* deklarasi. Deklarasi di dalamnya diurun daya berbagai pihak dan dikelola oleh Microsoft beserta kontributor sumber terbuka. React misalnya, tidak membundel *file* deklarasinya sendiri, namun kita bisa mendapatkannya dari DefinitelyTyped. Untuk melakukannya, masukkan perintah berikut dalam terminal.
 
 ```bash
 # yarn
@@ -302,8 +303,8 @@ yarn add --dev @types/react
 npm i --save-dev @types/react
 ```
 
-__Local Declarations__
-Sometimes the package that you want to use doesn't bundle declarations nor is it available on DefinitelyTyped. In that case, we can have a local declaration file. To do this, create a `declarations.d.ts` file in the root of your source directory. A simple declaration could look like this:
+__Deklarasi Lokal__
+Terkadang *package* yang ingin digunakan tidak memiliki deklarasi terbundel atau tidak tersedia di DefinitelyTyped. Pada kasus ini, kita bisa membuat *file* deklarasi lokal. Untuk melakukannya, buat *file* `declarations.d.ts` pada akar direktori sumber Anda. Deklarasi sederhana tampak sebagai berikut:
 
 ```typescript
 declare module 'querystring' {
@@ -312,24 +313,24 @@ declare module 'querystring' {
 }
 ```
 
-You are now ready to code! We recommend to check out the following resources to learn more about TypeScript:
+Kini Anda siap menciptakan kode program! Kami sarankan untuk mengunjungi sumber daya berikut untuk mempelajari lebih lanjut tentang TypeScript:
 
-* [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html)
-* [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
-* [TypeScript Documentation: React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
+* [Dokumentasi TypeScript: *Type* Dasar](https://www.typescriptlang.org/docs/handbook/basic-types.html)
+* [Dokumentasi TypeScript: Migrasi dari Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
+* [Dokumentasi TypeScript: React dan Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
 
 ## Reason {#reason}
 
-[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](https://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.
+[Reason](https://reasonml.github.io/) bukan sebuah bahasa baru, Reason merupakan sintaksis dan *toolchain* baru yang didukung bahasa [OCaml](https://ocaml.org/) yang telah teruji. Reason memberikan sintaksis OCaml yang familier, yang ditujukan untuk pemrogram JavaScript, serta melayani alur kerja NPM/Yarn yang sudah ada dan telah diketahui.
 
-Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html).
+Reason dikembangkan di Facebook, dan digunakan dalam beberapa produknya seperti Messenger. Reason masih bersifat eksperimental tetapi telah memiliki [*binding* React khusus](https://reasonml.github.io/reason-react/) yang diasuh oleh Facebook serta [komunitas yang dinamis](https://reasonml.github.io/docs/en/community.html).
 
 ## Kotlin {#kotlin}
 
-[Kotlin](https://kotlinlang.org/) is a statically typed language developed by JetBrains. Its target platforms include the JVM, Android, LLVM, and [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). 
+[Kotlin](https://kotlinlang.org/) merupakan *typed language* yang statis dan dikembangkan oleh JetBrains. Platform targetnya mencakup JVM, Android, LLVM, dan [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). 
 
-JetBrains develops and maintains several tools specifically for the React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) as well as [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). The latter helps you start building React apps with Kotlin with no build configuration.
+JetBrains mengembangkan dan mengasuh beberapa peralatan khusus untuk komunitas React: [*binding* React](https://github.com/JetBrains/kotlin-wrappers) serta [*Create React Kotlin App*](https://github.com/JetBrains/create-react-kotlin-app). Yang terakhir bisa membantu Anda membangun aplikasi React bersama Kotlin tanpa adanya konfigurasi *build*.
 
-## Other Languages {#other-languages}
+## Bahasa Lainnya {#other-languages}
 
-Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](https://fable.io/) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
+Perhatikan bahwa ada beberapa *typed language* yang statis yang mengompilasi menjadi JavaScript serta kompatibel dengan React. Misalnya, [F#/Fable](https://fable.io/) dengan [elmish-react](https://elmish.github.io/react). Kunjungi masing-masing situs untuk informasi lebih lanjut. Silakan tambahkan *typed language* statis yang berfungsi bersama React ke halaman ini.

From eaaa74f0ef5bb3cdcb14f7c0fbd097ed56a4447b Mon Sep 17 00:00:00 2001
From: Brilyandika Andhana <brilyandika.andhana@gmail.com>
Date: Tue, 5 Mar 2019 12:25:27 +0700
Subject: [PATCH 07/10] React Without JSX

---
 content/docs/react-without-jsx.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md
index 85cdba45f..600547cd2 100644
--- a/content/docs/react-without-jsx.md
+++ b/content/docs/react-without-jsx.md
@@ -4,11 +4,11 @@ title: React Without JSX
 permalink: docs/react-without-jsx.html
 ---
 
-JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
+JSX bukan persyaratan untuk menggunakan React. Menggunakan React tanpa JSX sangat cocok ketika Anda tidak ingin mengatur kompilasi di lingkungan pembangunan Anda.
 
-Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript.
+Setiap elemen hanyalah _syntactic sugar_ untuk pemanggilan  `React.createElement(component, props, ...children)`. Jadi, apa pun yang dapat Anda lakukan dengan JSX juga dapat dilakukan hanya dengan JavaScript biasa.
 
-For example, this code written with JSX:
+Misalnya, kode ini ditulis dengan JSX:
 
 ```js
 class Hello extends React.Component {
@@ -23,7 +23,7 @@ ReactDOM.render(
 );
 ```
 
-can be compiled to this code that does not use JSX:
+Dapat dikompilasi dengan kode dibawah ini untuk yang tidak menggunakan JSX:
 
 ```js
 class Hello extends React.Component {
@@ -38,11 +38,11 @@ ReactDOM.render(
 );
 ```
 
-If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Jika Anda ingin tahu lebih lanjut untuk melihat banyak contoh tentang bagaimana JSX dikonversi ke JavaScript, Anda dapat mencobanya di [the online Babel compiler](babel://jsx-simple-example).
 
-The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
+Komponen dapat diberikan sebagai string, atau sebagai subkelas dari `React.Component`, atau fungsi murni untuk komponen _stateless_.
 
-If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
+Jika Anda terlalu lelah mengetik `React.createElement` satu pola umum adalah dengan menggunakan pintasan:
 
 ```js
 const e = React.createElement;
@@ -53,7 +53,7 @@ ReactDOM.render(
 );
 ```
 
-If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.
+Jika Anda menggunakan pintasan `React.createElement`, akan lebih mudah menggunakan React tanpa JSX.
 
-Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax.
+Atau, Anda dapat merujuk ke proyek komunitas seperti [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) dan[`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) yang menawarkan _terser syntax_.
 

From f5f118d6bfe88663bd413c35b72eec60ad31096b Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Fri, 3 Jan 2020 17:18:26 +0700
Subject: [PATCH 08/10] address old code reviews

---
 content/docs/portals.md                 |  4 ++--
 content/docs/react-without-es6.md       |  8 ++++----
 content/docs/refs-and-the-dom.md        | 16 ++++++++--------
 content/docs/static-type-checking.md    | 20 ++++++++++----------
 content/docs/uncontrolled-components.md |  8 ++++----
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index 82938e44a..bbc258d0e 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -10,7 +10,7 @@ Portal menyediakan cara utama untuk me-*render* anak ke dalam simpul DOM yang be
 ReactDOM.createPortal(child, container)
 ```
 
-Argumen pertama (`child`) berupa [anak React yang bisa di-*render*](/docs/react-component.html#render), misalnya sebuah elemen, string, atau *fragment*. Argumen kedua (`container`) merupakan elemen DOM.
+Argumen pertama (`child`) berupa [anak React yang bisa di-*render*](/docs/react-component.html#render), misalnya sebuah elemen, *string*, atau *fragment*. Argumen kedua (`container`) merupakan elemen DOM.
 
 ## Penggunaan {#usage}
 
@@ -53,7 +53,7 @@ Penggunaan umum untuk portal adalah ketika komponen induk memiliki gaya `overflo
 
 ## *Event Bubbling* lewat Portal {#event-bubbling-through-portals}
 
-Walau sebuah portal bisa berada di mana saja dalam pohon DOM, portal tersebut berperilaku seperti halnya anak React yang normal. Fitur seperti *context work* bekerja sama persis tanpa tergantung apakah sebuah anak adalah sebuah portal, karena portal masih berada dalam *pohon React* tanpa memandang posisinya dalam *pohon DOM*.
+Walau sebuah portal bisa berada di mana saja dalam pohon DOM, portal tersebut berperilaku seperti halnya anak React yang normal. Fitur seperti *context* bekerja sama persis tanpa tergantung apakah sebuah anak adalah sebuah portal, karena portal masih berada dalam *pohon React* tanpa memandang posisinya dalam *pohon DOM*.
 
 Ini mencakup *event bubbling*. Sebuah *event* yang dijalankan dari dalam portal akan dipropagasikan ke induknya dalam *pohon React* yang memuatnya, walau elemen tersebut bukan merupakan induk dalam *pohon DOM*. Misalnya pada struktur HTML berikut:
 
diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
index 720c8d602..93d3426eb 100644
--- a/content/docs/react-without-es6.md
+++ b/content/docs/react-without-es6.md
@@ -84,7 +84,7 @@ var Counter = createReactClass({
 
 ## *Autobinding* {#autobinding}
 
-Pada komponen React yang dideklarasikan sebagai kelas ES6, *method* mengikuti semantik yang sama seperti kelas ES6 reguler. Ini berarti *method* tersebut tidak secara otomatis mem-*bind* `this` kepada instans. Anda harus secara eksplisit menggunakan `.bind(this)` pada konstruktor:
+Pada komponen React yang dideklarasikan sebagai kelas ES6, *method* mengikuti semantik yang sama seperti kelas ES6 reguler. Ini berarti *method* tersebut tidak secara otomatis mem-*bind* `this` kepada *instance*. Anda harus secara eksplisit menggunakan `.bind(this)` pada konstruktor:
 
 ```javascript
 class SayHello extends React.Component {
@@ -144,7 +144,7 @@ class SayHello extends React.Component {
     super(props);
     this.state = {message: 'Halo!'};
   }
-  // PERINGATAN: sintalsis ini bersifat eksperimental!
+  // PERINGATAN: sintaksis ini bersifat eksperimental!
   // Menggunakan *arrow* akan mem-bind method:
   handleClick = () => {
     alert(this.state.message);
@@ -174,7 +174,7 @@ Jika Anda ingin bermain pada area yang aman, Anda memiliki beberapa opsi:
 >
 >ES6 diluncurkan tanpa adanya dukungan *mixin*. Oleh sebab itu, tidak ada dukungan untuk *mixin* saat Anda menggunakan React dengan kelas ES6.
 >
->**Kami juga menemukan banyak masalah pada kode dasar yang menggunakan *mixin*, [dan tidak menyarankan untuk menggunakannya untuk kode yang baru](/blog/2016/07/13/mixins-considered-harmful.html).**
+>**Kami juga menemukan banyak masalah pada basis kode yang menggunakan *mixin*, [dan tidak menyarankan untuk menggunakannya untuk kode yang baru](/blog/2016/07/13/mixins-considered-harmful.html).**
 >
 >Bagian berikut hanya digunakan untuk rujukan.
 
@@ -223,4 +223,4 @@ ReactDOM.render(
 );
 ```
 
-Jika komponen menggunakan beberapa *mixin* dan beberapa *mixin* mendefinisikan *lifecycle method* yang sama (beberapa *mixin* ingin melakukan pembersihan ketika komponen dihancurkan), semua *lifecycle method* dijamin untuk dipanggil. *Method* yang didefiniskan pada *mixin* dijalankan secara berurutan sesuai dengan dengan proses pendaftarannya, diikuti dengan pemanggilan *method* pada komponen.
+Jika komponen menggunakan beberapa *mixin* dan beberapa *mixin* mendefinisikan *lifecycle method* yang sama (contohnya, beberapa *mixin* ingin melakukan pembersihan ketika komponen dihancurkan), semua *lifecycle method* dijamin untuk dipanggil. *Method* yang didefinisikan pada *mixin* dijalankan secara berurutan sesuai dengan dengan proses pendaftarannya, diikuti dengan pemanggilan *method* pada komponen.
diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 19de4c4e1..a2e4172bc 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html
 
 *Ref* menyediakan cara untuk mengakses simpul DOM atau elemen React yang dibuat dalam *render method*.
 
-Dalam *dataflow* React yang umum, [*props*](/docs/components-and-props.html) adalah satu-satunya cara bagi komponen induk untuk berinteraksi dengan anaknya. Untuk memodifikasi anak, Anda me-*render* ulang dengan *props* yang baru. Tetapi ada beberapa kasus ketika Anda harus memodifikasi anak secara imperatif di luar *dataflow* yang umum. Anak yang akan dimodifikasi bisa berupa komponen React atau elemen DOM. Pada kedua kasus ini, React menyediakan jalan keluar.
+Dalam aliran data React yang umum, [*props*](/docs/components-and-props.html) adalah satu-satunya cara bagi komponen induk untuk berinteraksi dengan anaknya. Untuk memodifikasi anak, Anda me-*render* ulang dengan *props* yang baru. Tetapi ada beberapa kasus ketika Anda harus memodifikasi anak secara imperatif di luar aliran data yang umum. Anak yang akan dimodifikasi bisa berupa komponen React atau elemen DOM. Pada kedua kasus ini, React menyediakan jalan keluar.
 
 ### Kapan Harus Menggunakan *Ref* {#when-to-use-refs}
 
@@ -25,11 +25,11 @@ Ada beberapa kasus yang cocok untuk *ref*:
 
 Hindari penggunaan *ref* untuk semua yang bisa dilakukan secara deklaratif.
 
-Misalnya, alih-alih mengekspos *method* `open()` dan `close()` pada komponen `Dialog`, operkan *props* `isOpen` kepadanya.
+Misalnya, alih-alih mengekspos *method* `open()` dan `close()` pada komponen `Dialog`, kirimkan *props* `isOpen` kepadanya.
 
 ### Jangan Berlebihan Menggunakan *Ref* {#dont-overuse-refs}
 
-Godaan pertama mungkin adalah menggunakan *ref* agar aplikasi "bisa berfungsi". Jika benar demikian, hentikan sejenak dan pikirkan secara kritis, tempat *state* harus berada dalam hierarki komponen. Sering kali nantinya ditemukan bahwa tempat yang lebih baik untuk "memiliki" *state* tersebut adalah di tingkat yang lebih tinggi dalam hierarki. Lihat panduan [Meningkatkan *State*](/docs/lifting-state-up.html) untuk contohnya.
+Godaan pertama mungkin adalah menggunakan *ref* agar aplikasi "bisa berfungsi". Jika benar demikian, hentikan sejenak dan pikirkan secara kritis, tempat *state* harus berada dalam hierarki komponen. Sering kali nantinya ditemukan bahwa tempat yang lebih baik untuk "memiliki" *state* tersebut adalah di tingkat yang lebih tinggi dalam hierarki. Lihat panduan [Memindahkan *State* ke Atas](/docs/lifting-state-up.html) untuk contohnya.
 
 > Catatan
 >
@@ -37,7 +37,7 @@ Godaan pertama mungkin adalah menggunakan *ref* agar aplikasi "bisa berfungsi".
 
 ### Membuat *Ref* {#creating-refs}
 
-*Ref* dibuat menggunakan `React.createRef()` dan disematkan ke elemen React lewat atribut `ref`. *Ref* umumnya ditetapkan ke properti instans saat komponen dibuat agar mereka bisa dirujuk dalam komponen.
+*Ref* dibuat menggunakan `React.createRef()` dan disematkan ke elemen React lewat atribut `ref`. *Ref* umumnya ditetapkan ke properti *instance* saat komponen dibuat agar mereka bisa dirujuk dalam komponen.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -81,7 +81,7 @@ class CustomTextInput extends React.Component {
   }
 
   focusTextInput() {
-    // Fokuskan secara eksplisit pada input teks menggunakan API DOM mentah
+    // Fokuskan secara eksplisit pada input teks menggunakan API DOM dasar
     // Catatan: kita sedang mengakses "current" untuk mendapatkan simpul DOM
     this.textInput.current.focus();
   }
@@ -153,7 +153,7 @@ class Parent extends React.Component {
     this.textInput = React.createRef();
   }
   render() {
-    // Ini tidak akan berfungsi!
+    // Ini *tidak akan* berfungsi!
     return (
       <MyFunctionComponent ref={this.textInput} />
     );
@@ -221,7 +221,7 @@ class CustomTextInput extends React.Component {
     };
 
     this.focusTextInput = () => {
-      // Fokus pada input teks menggunakan API DOM mentah
+      // Fokus pada input teks menggunakan API DOM dasar
       if (this.textInput) this.textInput.focus();
     };
   }
@@ -279,7 +279,7 @@ Pada contoh di atas, `Parent` mengoper *callback ref*-nya sebagai *props* `input
 
 ### API *Legacy*: *String Ref* {#legacy-api-string-refs}
 
-Jika sebelumnya Anda bekerja dengan React, Anda mungkin sudah mengenal API lawas dengan atribut `ref` berupa string, misalnya `"textInput"`, dan simpul DOM yang diakses dengan `this.refs.textInput`. Kami sarankan untuk tidak melakukannya karena *string ref* memiliki [beberapa masalah](https://github.com/facebook/react/pull/8333#issuecomment-271648615) dan dipertimbangkan sebagai *legacy*, serta **kemungkinan besar akan dihapus dalam salah satu rilis di masa mendatang**. 
+Jika sebelumnya Anda bekerja dengan React, Anda mungkin sudah mengenal API lawas dengan atribut `ref` berupa *string*, misalnya `"textInput"`, dan simpul DOM yang diakses dengan `this.refs.textInput`. Kami sarankan untuk tidak melakukannya karena *string ref* memiliki [beberapa masalah](https://github.com/facebook/react/pull/8333#issuecomment-271648615) dan dipertimbangkan sebagai *legacy*, serta **kemungkinan besar akan dihapus dalam salah satu rilis di masa mendatang**. 
 
 > Catatan
 >
diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index fdda0c663..606b91e16 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -18,7 +18,7 @@ Untuk menggunakannya, Anda harus:
 
 Kami akan menjelaskan langkah-langkah tersebut secara mendetail.
 
-### Menambahkan Flow ke Project {#adding-flow-to-a-project}
+### Menambahkan Flow ke Proyek {#adding-flow-to-a-project}
 
 Pertama-tama, buka direktori proyek Anda di terminal. Anda akan harus menjalankan perintah berikut:
 
@@ -67,19 +67,19 @@ Perintah tersebut akan membuat konfigurasi Flow yang harus Anda sertakan dalam *
 
 ### Menghapus Sintaksis Flow dari Kode Hasil Kompilasi {#stripping-flow-syntax-from-the-compiled-code}
 
-Flow memperluas bahasa JavaScript dengan sintaksis khusus untuk *type annotation*. Akan tetapi browser tidak mengenal sintaksis ini, jadi kita harus memastikan sintaksis tersebut dihapus dari bundel JavaScript hasil kompilasi yang akan dikirim ke browser.
+Flow memperluas bahasa JavaScript dengan sintaksis khusus untuk *type annotation*. Akan tetapi *browser* tidak mengenal sintaksis ini, jadi kita harus memastikan sintaksis tersebut dihapus dari bundel JavaScript hasil kompilasi yang akan dikirim ke *browser*.
 
 Cara yang benar untuk melakukannya tergantung pada peralatan yang Anda gunakan untuk mengompilasi JavaScript.
 
-#### *Create React App* {#create-react-app}
+#### Create React App {#create-react-app}
 
-Jika proyek Anda disiapkan menggunakan [*Create React App*](https://github.com/facebookincubator/create-react-app), maka kami ucapkan selamat! Anotasi Flow akan dihapus secara *default* dan tidak ada yang perlu dilakukan pada langkah ini.
+Jika proyek Anda disiapkan menggunakan [Create React App](https://github.com/facebookincubator/create-react-app), maka kami ucapkan selamat! Anotasi Flow akan dihapus secara *default* dan tidak ada yang perlu dilakukan pada langkah ini.
 
 #### Babel {#babel}
 
 >Catatan:
 >
->Petunjuk berikut *bukan* ditujukan untuk pengguna *Create React App*. Walau pengguna *Create React App* menggunakan Babel di balik layar, Babel tersebut telah dikonfigurasi untuk memahami Flow. Hanya ikuti langkah berikut jika Anda *tidak* menggunakan *Create React App*.
+>Petunjuk berikut *bukan* ditujukan untuk pengguna Create React App. Walau pengguna Create React App menggunakan Babel di balik layar, Babel tersebut telah dikonfigurasi untuk memahami Flow. Hanya ikuti langkah berikut jika Anda *tidak* menggunakan Create React App.
 
 Jika Babel dikonfigurasi secara manual untuk proyek Anda, Anda harus menginstal *preset* khusus untuk Flow.
 
@@ -95,7 +95,7 @@ Jika menggunakan npm, jalankan:
 npm install --save-dev @babel/preset-flow
 ```
 
-Kemudian tambahkan *preset* `flow` ke [konfigurasi Babel ](https://babeljs.io/docs/usage/babelrc/) Anda. Misalnya, jika Babel dikonfigurasi lewat *file* `.babelrc`, tampilannya mungkin seperti berikut:
+Kemudian tambahkan *preset* `flow` ke [konfigurasi Babel](https://babeljs.io/docs/usage/babelrc/) Anda. Misalnya, jika Babel dikonfigurasi lewat *file* `.babelrc`, tampilannya mungkin seperti berikut:
 
 ```js{3}
 {
@@ -214,7 +214,7 @@ Selamat! Anda telah menginstal versi terbaru TypeScript ke proyek Anda. Instalas
 ```
 
 ### Mengonfigurasi Kompiler TypeScript {#configuring-the-typescript-compiler}
-Kompiler tidak akan membantu kita hingga kita memberi tahu apa yang harus kompiler lakukan. Pada TypeScript, aturan ini didefinisikan pada *file* khusus yang diberi nama `tsconfig.json`. Untuk membuat *file* ini:
+Kompiler tidak akan membantu kita hingga kita memberi tahu apa yang harus kompiler lakukan. Pada TypeScript, aturan ini didefinisikan pada berkas khusus yang diberi nama `tsconfig.json`. Untuk membuat berkas ini:
 
 Jika menggunakan [Yarn](https://yarnpkg.com/), jalankan:
 
@@ -230,7 +230,7 @@ npx tsc --init
 
 Pada `tsconfig.json` yang baru dibuat, Anda bisa melihat banyak opsi yang bisa dikonfigurasi untuk kompiler. Untuk deskripsi mendetail tentang semua opsi kunjungi [halaman ini](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
 
-Dari sekian banyak opsi, mari kita lihat opsi `rootDir` dan `outDir`. Awalnya, kompiler akan mengambil *file* TypeScript dan menciptakan *file* JavaScript. Akan tetapi kita tidak ingin mencampur aduk *file* sumber dengan *file* keluaran yang diciptakan..
+Dari sekian banyak opsi, mari kita lihat opsi `rootDir` dan `outDir`. Awalnya, kompiler akan mengambil berkas TypeScript dan menciptakan berkas JavaScript. Akan tetapi kita tidak ingin mencampur aduk berkas sumber dengan berkas keluaran yang diciptakan.
 
 Kita akan mengatasi masalah ini dalam dua langkah:
 * Pertama-tama, mari kita susun struktur proyek kita seperti berikut. Kita akan tempatkan semua kode sumber dalam direktori `src`.
@@ -257,7 +257,7 @@ Kita akan mengatasi masalah ini dalam dua langkah:
 }
 ```
 
-Kini, jika kita menjalankan skrip *build*, maka kompiler akan menghasilkan kode JavaScript ke *folder* `build`. [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) menyediakan `tsconfig.json` dengan sekumpulan aturan yang layak bagi Anda untuk memulai.
+Kini, jika kita menjalankan *build script*, maka kompiler akan menghasilkan kode JavaScript di *folder* `build`. [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) menyediakan `tsconfig.json` dengan sekumpulan aturan yang cukup bagi Anda untuk memulai.
 
 Secara umum Anda tidak ingin menyimpan kode JavaScript yang dihasilkan dalam sistem *source control* Anda, jadi pastikan untuk menambahkan *folder* *build* ke *file* `.gitignore`.
 
@@ -302,7 +302,7 @@ npm i --save-dev @types/react
 ```
 
 __Deklarasi Lokal__
-Terkadang *package* yang ingin digunakan tidak memiliki deklarasi terbundel atau tidak tersedia di DefinitelyTyped. Pada kasus ini, kita bisa membuat *file* deklarasi lokal. Untuk melakukannya, buat *file* `declarations.d.ts` pada akar direktori sumber Anda. Deklarasi sederhana tampak sebagai berikut:
+Terkadang *package* yang ingin digunakan tidak memiliki deklarasi terbundel atau tidak tersedia di DefinitelyTyped. Pada kasus ini, kita bisa membuat berkas deklarasi lokal. Untuk melakukannya, buat berkas `declarations.d.ts` pada akar direktori sumber Anda. Deklarasi sederhana tampak sebagai berikut:
 
 ```typescript
 declare module 'querystring' {
diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index ec532b226..2eeae22cc 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -4,7 +4,7 @@ title: Uncontrolled Component
 permalink: docs/uncontrolled-components.html
 ---
 
-Pada sebagian besar kasus, kami sarankan untuk menggunakan [*controlled component*](/docs/forms.html#controlled-components) untuk mengimpementasikan *form*. Pada *controlled component*, *form data* ditangani oleh komponen React. Cara alternatifnya adalah menggunakan *uncontrolled component*, dengan *form data* ditangani oleh DOM-nya sendiri.
+Pada sebagian besar kasus, kami sarankan untuk menggunakan [*controlled component*](/docs/forms.html) untuk mengimpementasikan *form*. Pada *controlled component*, data *form* ditangani oleh komponen React. Cara alternatifnya adalah menggunakan *uncontrolled component*, di mana data *form* akan ditangani oleh DOM-nya sendiri.
 
 Untuk menulis *uncontrolled component*, alih-alih menulis *event handler* untuk setiap pembaruan *state*, Anda bisa [menggunakan *ref*](/docs/refs-and-the-dom.html) untuk mendapatkan nilai *form* dari DOM.
 
@@ -43,7 +43,7 @@ Oleh karena *uncontrolled component* menyimpan sumber kebenaran dalam DOM, terka
 
 Jika masih belum jelas jenis komponen mana yang harus Anda gunakan untuk situasi tertentu, mungkin [artikel tentang *controlled input* versus *uncontrolled input*](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) bisa membantu.
 
-### Nilai *Default* {#default-values}
+### Nilai Default {#default-values}
 
 Pada *lifecycle rendering* React, atribut `value` pada elemen *form* akan menimpa nilai pada DOM. Dengan *uncontrolled component*, sering kali Anda menginginkan React untuk menentukan nilai awal tetapi pembaruan berikutnya dilakukan secara *uncontrolled*. Untuk menangani kasus ini, Anda bisa menentukan atribut `defaultValue` alih-alih menggunakan `value`.
 
@@ -66,7 +66,7 @@ render() {
 
 Ini juga berlaku pada dukungan `defaultChecked` untuk `<input type="checkbox">` dan `<input type="radio">`, serta dukungan `defaultValue` untuk `<select>` dan `<textarea>`.
 
-## *Tag* *file input* {#the-file-input-tag}
+## Tag file input {#the-file-input-tag}
 
 Pada HTML, sebuah `<input type="file">` memungkinkan pengguna untuk memilih satu atau beberapa flle dari media penyimpanan mereka untuk diunggah ke server atau dimanipulasi dengan JavaScript lewat [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
@@ -76,7 +76,7 @@ Pada HTML, sebuah `<input type="file">` memungkinkan pengguna untuk memilih satu
 
 Dalam React, sebuah `<input type="file" />` selalu merupakan *uncontrolled component* karena nilainya hanya bisa disetel oleh pengguna, bukan oleh kode program.
 
-Anda harus menggunakan File API untuk berinteraksi dengan *file*. Contoh berikut menunjukkan cara membuat [*ref* ke simpul DOM](/docs/refs-and-the-dom.html) untuk mengakses *file* dalam *submit handler*:
+Anda harus menggunakan File API untuk berinteraksi dengan berkas. Contoh berikut menunjukkan cara membuat [*ref* ke simpul DOM](/docs/refs-and-the-dom.html) untuk mengakses berkas dalam *submit handler*:
 
 `embed:uncontrolled-components/input-type-file.js`
 

From cdab2ade9e84af944070daa188edd9b81a0679a8 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Fri, 3 Jan 2020 17:33:09 +0700
Subject: [PATCH 09/10] address code reviews for Test Renderer

---
 content/docs/reference-test-renderer.md | 32 ++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
index 2aba0f479..f41025b21 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/docs/reference-test-renderer.md
@@ -50,7 +50,7 @@ function MyComponent() {
   return (
     <div>
       <SubComponent foo="bar" />
-      <p className="my">Hello</p>
+      <p className="my">Halo</p>
     </div>
   )
 }
@@ -142,7 +142,7 @@ expect(root.toJSON()).toMatchSnapshot();
 testRenderer.toJSON()
 ```
 
-Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Pohon ini hanya berisi *node* *platform* khusus seperti `<div>` atau `<View>` dan beserta *props*-nya, tetapi tidak mengandung komponen yang dibuat oleh pengguna. Hal ini berguna untuk [pengujian potret](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
+Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Pohon ini hanya berisi *node* pada *platform* spesifik seperti `<div>` atau `<View>` dan beserta *props*-nya, tetapi tidak mengandung komponen yang dibuat oleh pengguna. Hal ini berguna untuk [*snapshot testing*](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
 
 ### `testRenderer.toTree()` {#testrenderertotree}
 
@@ -150,7 +150,7 @@ Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Pohon in
 testRenderer.toTree()
 ```
 
-Menghasilkan objek yang merepresentasikan diageam yang telah di-*render*. Tidak seperti `toJSON ()`, representasinya lebih detail daripada yang dihasilkan oleh `toJSON ()`, dan termasuk komponen yang dibuat pengguna. Anda mungkin tidak memerlukan *method* ini kecuali Anda sedang membuat *library* pernyataan sendiri di atas uji *renderer*.
+Menghasilkan objek yang merepresentasikan pohon yang telah di-*render*. Tidak seperti `toJSON ()`, representasinya lebih detail daripada yang dihasilkan oleh `toJSON ()`, dan termasuk komponen yang dibuat pengguna. Anda mungkin tidak memerlukan *method* ini kecuali Anda sedang membuat *library* perbandingan sendiri di atas *test renderer*.
 
 ### `testRenderer.update()` {#testrendererupdate}
 
@@ -206,7 +206,7 @@ Menemukan turunan tunggal dari *test instance* berdasarkan `type` yang disediaka
 testInstance.findByProps(props)
 ```
 
-Menemukan turunan tunggal *test instance* dengan berdasarkan `props` yang disediakan. Jika tidak ada satupun *test instance* dengan `props` yang disediakan, hal ini akan melemparkan *error*.
+Menemukan turunan tunggal dari *test instance* berdasarkan `props` yang disediakan. Jika tidak ada satupun *test instance* dengan `props` yang disediakan, fungsi ini akan melemparkan *error*.
 
 ### `testInstance.findAll()` {#testinstancefindall}
 
@@ -214,7 +214,7 @@ Menemukan turunan tunggal *test instance* dengan berdasarkan `props` yang disedi
 testInstance.findAll(test)
 ```
 
-Menemukan semua turunan *test instance* yang mana `test(testInstance)` menghasilkan nilai `true`.
+Menemukan semua turunan *test instance* dimana `test(testInstance)` menghasilkan nilai `true`.
 
 ### `testInstance.findAllByType()` {#testinstancefindallbytype}
 
@@ -222,7 +222,7 @@ Menemukan semua turunan *test instance* yang mana `test(testInstance)` menghasil
 testInstance.findAllByType(type)
 ```
 
-Menemukan semua turunan *test instance* dengan berdasarkan `type` yang disediakan.
+Menemukan semua turunan dari *test instance* berdasarkan `type` yang disediakan.
 
 ### `testInstance.findAllByProps()` {#testinstancefindallbyprops}
 
@@ -230,7 +230,7 @@ Menemukan semua turunan *test instance* dengan berdasarkan `type` yang disediaka
 testInstance.findAllByProps(props)
 ```
 
-Menemukan semua turunan *test instance* dengan berdasarkan `props` yang disediakan.
+Menemukan semua turunan dari *test instance* berdasarkan `props` yang disediakan.
 
 ### `testInstance.instance` {#testinstanceinstance}
 
@@ -238,7 +238,7 @@ Menemukan semua turunan *test instance* dengan berdasarkan `props` yang disediak
 testInstance.instance
 ```
 
-*Instance* dari komponen yang ada di *test instance*. Hanya tersedia untuk *class component*, karena *function component* tidak memiliki *instance*. Hal Ini sama dengan nilai `this` di dalam komponen yang diberikan.
+*Instance* komponen bersangkutan dari *test instance* ini. Hanya tersedia untuk *class component*, karena *function component* tidak memiliki *instance*. Bernilai sama dengan nilai `this` di dalam komponen yang diberikan.
 
 ### `testInstance.type` {#testinstancetype}
 
@@ -246,7 +246,7 @@ testInstance.instance
 testInstance.type
 ```
 
-Jenis dari komponen yang ada di *test instance*. Sebagai contoh, komponen `<Button />` memiliki tipe `Button`.
+Jenis dari komponen di dalam *test instance*. Sebagai contoh, komponen `<Button />` memiliki tipe `Button`.
 
 ### `testInstance.props` {#testinstanceprops}
 
@@ -254,7 +254,7 @@ Jenis dari komponen yang ada di *test instance*. Sebagai contoh, komponen `<Butt
 testInstance.props
 ```
 
-*Props* yang ada di *test instance*. Sebagai contoh, komponen `<Button size="small" />` memiliki `{size: 'small'}` sebagai *props*.
+*Props* dari komponen di dalam *test instance*. Sebagai contoh, komponen `<Button size="small" />` memiliki `{size: 'small'}` sebagai *props*.
 
 ### `testInstance.parent` {#testinstanceparent}
 
@@ -262,7 +262,7 @@ testInstance.props
 testInstance.parent
 ```
 
-Induk *test instance* dari *test instance* ini.
+*Test instance* induk dari *test instance* ini.
 
 ### `testInstance.children` {#testinstancechildren}
 
@@ -270,13 +270,13 @@ Induk *test instance* dari *test instance* ini.
 testInstance.children
 ```
 
-Anak *test instance* dari *test instance* ini.
+*Test instance* anak dari *test instance* ini.
 
 ## Gagasan {#ideas}
 
-Anda dapat mengoper *function* `createNodeMock` ke ` TestRenderer.create` sebagai opsinya, yang memungkinkan untuk referensi tiruan yang sudah diubah.
-`createNodeMock` menerima elemen tersebut dan harus menghasilkan objek referensi tiruan.
-Hal Ini berguna ketika Anda menguji sebuah komponen yang bergantung pada referensi.
+Anda dapat mengoper fungsi `createNodeMock` ke `TestRenderer.create` sebagai opsi, yang memungkinkan Anda untuk membuat *mock refs* buatan.
+`createNodeMock` menerima elemen saat ini dan harus menghasilkan sebuah objek *mock ref*.
+Hal Ini berguna ketika Anda menguji sebuah komponen yang bergantung pada *refs*.
 
 ```javascript
 import TestRenderer from 'react-test-renderer';
@@ -300,7 +300,7 @@ TestRenderer.create(
   {
     createNodeMock: (element) => {
       if (element.type === 'input') {
-        // tiruan function focus
+        // tiruan dari fungsi focus
         return {
           focus: () => {
             focused = true;

From 55eaf5c3bc669a14c6c671378d2d5735411e8635 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Fri, 3 Jan 2020 17:35:08 +0700
Subject: [PATCH 10/10] address code reviews for React Without JSX

---
 content/docs/react-without-jsx.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md
index 600547cd2..2999815a4 100644
--- a/content/docs/react-without-jsx.md
+++ b/content/docs/react-without-jsx.md
@@ -4,11 +4,11 @@ title: React Without JSX
 permalink: docs/react-without-jsx.html
 ---
 
-JSX bukan persyaratan untuk menggunakan React. Menggunakan React tanpa JSX sangat cocok ketika Anda tidak ingin mengatur kompilasi di lingkungan pembangunan Anda.
+JSX bukan persyaratan untuk menggunakan React. Menggunakan React tanpa JSX sangat cocok ketika Anda tidak ingin mengatur kompilasi di *build environment* Anda.
 
 Setiap elemen hanyalah _syntactic sugar_ untuk pemanggilan  `React.createElement(component, props, ...children)`. Jadi, apa pun yang dapat Anda lakukan dengan JSX juga dapat dilakukan hanya dengan JavaScript biasa.
 
-Misalnya, kode ini ditulis dengan JSX:
+Misalnya, kode yang ditulis dengan JSX berikut:
 
 ```js
 class Hello extends React.Component {
@@ -40,7 +40,7 @@ ReactDOM.render(
 
 Jika Anda ingin tahu lebih lanjut untuk melihat banyak contoh tentang bagaimana JSX dikonversi ke JavaScript, Anda dapat mencobanya di [the online Babel compiler](babel://jsx-simple-example).
 
-Komponen dapat diberikan sebagai string, atau sebagai subkelas dari `React.Component`, atau fungsi murni untuk komponen _stateless_.
+Komponen dapat diberikan sebagai _string_, atau sebagai subkelas dari `React.Component`, atau fungsi murni untuk komponen _stateless_.
 
 Jika Anda terlalu lelah mengetik `React.createElement` satu pola umum adalah dengan menggunakan pintasan: