From 7bb87d9716b494daab438b0a756b93d4b9cb1a77 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Fri, 8 Feb 2019 18:30:29 +0800
Subject: [PATCH 1/9] edit commponent props

---
 content/docs/components-and-props.md | 57 ++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 47daaedf9..5e4d3c5c3 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,37 +16,43 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
+Component membolehkan kamu untuk memecah UI secara independen, potongan yang bisa digunakan kembali, dan berpikir tentang setiap potongan di dalam lingkungan.
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+Secara konsep, komponen mirip seperti fungsi di Javascript. Mereka menerima beberapa masukan (biasa disebut "props") dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
 
-## Function and Class Components {#function-and-class-components}
+## Fungsi dan Kelas Komponen {#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+Cara paling sederhana untuk mendefinisikan sebuah komponen adalah dengan
+menguliskan sebuah fungsi Javascript:
 
 ```js
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Halo, {props.name}</h1>;
 }
 ```
 
-This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
+Fungsi ini adalah komponent React yang sah karena menerima sebuah "props"
+tunggal (yang berdiri untuk properti) argumen objek dengan data dan kembalian
+sebuah Elemen React. Kami menyebut komponen karena mereka adalah fungsi
+Javascript secara harfiah.
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+Kamu juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) untuk mendefinisikan sebuah komponen:
 
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Halo, {this.props.name}</h1>;
   }
 }
 ```
 
 The above two components are equivalent from React's point of view.
+Kedua komponen di atas adalah sama dalam pandangan React.
 
 Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
+Kelas mempunyai beberapa fitur tambahan yang akan kami diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Until then, kita akan menggunakan fungsi komponen untuk keringkasan mereka.
 
-## Rendering a Component {#rendering-a-component}
+## Me-render sebuah Komponen {#rendering-a-component}
 
 Previously, we only encountered React elements that represent DOM tags:
 
@@ -55,6 +61,8 @@ const element = <div />;
 ```
 
 However, elements can also represent user-defined components:
+Namun, element juga dapat di representasikan component yang di representasikan
+oleh pengguna:
 
 ```js
 const element = <Welcome name="Sara" />;
@@ -63,6 +71,7 @@ const element = <Welcome name="Sara" />;
 When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
 
 For example, this code renders "Hello, Sara" on the page:
+Sebagai contoh, kode ini akan me-render "Hello, Sara" pada halaman:
 
 ```js{1,5}
 function Welcome(props) {
@@ -79,27 +88,42 @@ ReactDOM.render(
 [](codepen://components-and-props/rendering-a-component)
 
 Let's recap what happens in this example:
+Mari merangkum apa yang terjadi pada contoh ini:
 
 1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
+1. Kita memanggil `ReactDOM.render()` dengan element `<Welcome name="Sara" />`.
 2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
+2. React memanggil komponen `Welcome` dengan `{name: 'Sara'}` sebagai
+   propertinya.
 3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
 4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
 
->**Note:** Always start component names with a capital letter.
+>**Catatan:** Selalu awali nama komponen dengan sebuah huruf kapital.
 >
 >React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>React memperlakukan awalan komponen dengan huruf kecil sebagai tag dari DOM.
+>Sebagai contoh, `<div />`, merepresentasikan sebuah HTML div tag, tetapi
+>`<Welcome />` merepresentasikan sebuah komponen dan membutuhkan Welcome to be
+>in scope.
 >
->You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Kamu dapat membaca lebih lanjut tentang alasan dibalik Konvensi [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
 ## Composing Components {#composing-components}
+## Menyusun Komponen {#composing-components}
 
 Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
+Komponen dapat merujuk ke komponen lain pada akhirnya. Ini memungkinkan kita untuk menggunakan
+abstraksi dari komponen yang sama untuk semua level detail. Sebuah tombol,
+sebuah formulir, sebuah dialog, sebuah tampilan: di dalam aplikasi React,  semua
+... dalam bentuk komponen.
 
 For example, we can create an `App` component that renders `Welcome` many times:
+Sebagai contoh, kita dapat membuat sebuah komponen `App` yang mencetak `Welcome`
+berkali - kali.
 
 ```js{8-10}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Halo, {props.name}</h1>;
 }
 
 function App() {
@@ -121,12 +145,16 @@ ReactDOM.render(
 [](codepen://components-and-props/composing-components)
 
 Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
+Secara khusus, aplikasi React yang baru mempunyai sebuah komponen `App` pada
+bagian paling atas. Namun, jika kamu mengintegrasi React kedalam
 
 ## Extracting Components {#extracting-components}
 
 Don't be afraid to split components into smaller components.
+Jangan takut untuk memisahkan komponen ke dalam bentuk yang lebih kecil.
 
 For example, consider this `Comment` component:
+Sebagai contoh, 
 
 ```js
 function Comment(props) {
@@ -155,6 +183,8 @@ function Comment(props) {
 [](codepen://components-and-props/extracting-components)
 
 It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+Komponen menerima `author` (sebuah objek), `text` (sebuah string), dan `date`
+(sebuah tanggal) sebagai props, dan mendeskripsikan sebuah komponen dalam
 
 This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
 
@@ -174,6 +204,7 @@ function Avatar(props) {
 The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
 
 We recommend naming props from the component's own point of view rather than the context in which it is being used.
+Kami merekomendasikan
 
 We can now simplify `Comment` a tiny bit:
 
@@ -256,7 +287,9 @@ function withdraw(account, amount) {
 ```
 
 React is pretty flexible but it has a single strict rule:
+React sangat fleksibel tapi mempunyai satu peraturan yang ketat:
 
 **All React components must act like pure functions with respect to their props.**
 
 Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
+Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya]()

From 39920c48a54b1ddc199e862a0c4e87f4b6e68735 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Sun, 10 Feb 2019 13:10:01 +0800
Subject: [PATCH 2/9] start-translation

---
 content/docs/components-and-props.md | 120 ++++++++++++++-------------
 1 file changed, 63 insertions(+), 57 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 5e4d3c5c3..7ec03bb3a 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: Komponen and Props
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,52 +16,49 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Component membolehkan kamu untuk memecah UI secara independen, potongan yang bisa digunakan kembali, dan berpikir tentang setiap potongan di dalam lingkungan.
+Komponen mempermudah anda untuk memecah UI menjadi bagian tersendiri, potongan yang bisa digunakan kembali, dan berpikir tentang setiap potongan di dalam lingkungan.
 
-Secara konsep, komponen mirip seperti fungsi di Javascript. Mereka menerima beberapa masukan (biasa disebut "props") dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
+Secara konsep, komponen mirip dengan fungsi di Javascript. Mereka menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
 
-## Fungsi dan Kelas Komponen {#function-and-class-components}
+## Fungsi dan Komponen Kelas {#function-and-class-components}
 
 Cara paling sederhana untuk mendefinisikan sebuah komponen adalah dengan
-menguliskan sebuah fungsi Javascript:
+menuliskan sebuah fungsi Javascript:
 
 ```js
 function Welcome(props) {
-  return <h1>Halo, {props.name}</h1>;
+  return <h1>Hello, {props.name}</h1>;
 }
 ```
 
-Fungsi ini adalah komponent React yang sah karena menerima sebuah "props"
-tunggal (yang berdiri untuk properti) argumen objek dengan data dan kembalian
-sebuah Elemen React. Kami menyebut komponen karena mereka adalah fungsi
-Javascript secara harfiah.
+Fungsi ini adalah komponen React yang benar karena menerima sebuah *"props"*
+tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian
+sebuah Elemen React. Kita menyebut komponen karena itu benar - benear merupakan fungsi
+Javascript.
 
-Kamu juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) untuk mendefinisikan sebuah komponen:
+Anda juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) untuk mendefinisikan sebuah komponen:
 
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Halo, {this.props.name}</h1>;
+    return <h1>Hello, {this.props.name}</h1>;
   }
 }
 ```
 
-The above two components are equivalent from React's point of view.
-Kedua komponen di atas adalah sama dalam pandangan React.
+Kedua komponen di atas mempunyai nilai yang sama dalam sudut pandang React.
 
-Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
-Kelas mempunyai beberapa fitur tambahan yang akan kami diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Until then, kita akan menggunakan fungsi komponen untuk keringkasan mereka.
+Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai disitu, kita akan menggunakan fungsi komponen untuk mempersingkat mereka.
 
 ## Me-render sebuah Komponen {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+Sebelumnya, kita hanya menemui elemen React yang mewakili tag DOM:
 
 ```js
 const element = <div />;
 ```
 
-However, elements can also represent user-defined components:
-Namun, element juga dapat di representasikan component yang di representasikan
+Namun, elemen juga dapat mewakilkan komponen yang di definisikan
 oleh pengguna:
 
 ```js
@@ -69,8 +66,9 @@ const element = <Welcome name="Sara" />;
 ```
 
 When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
+Ketika React melihat sebuah element mewakili sebuah komponen yang dibuat oleh
+pengguna,
 
-For example, this code renders "Hello, Sara" on the page:
 Sebagai contoh, kode ini akan me-render "Hello, Sara" pada halaman:
 
 ```js{1,5}
@@ -87,28 +85,24 @@ ReactDOM.render(
 
 [](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
-Mari merangkum apa yang terjadi pada contoh ini:
+Mari merangkum apa yang terjadi pada contoh kali ini:
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-1. Kita memanggil `ReactDOM.render()` dengan element `<Welcome name="Sara" />`.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
+1. Kita memanggil `ReactDOM.render()` dengan elemen `<Welcome name="Sara" />`.
 2. React memanggil komponen `Welcome` dengan `{name: 'Sara'}` sebagai
    propertinya.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+3. Komponen `Welcome` kita akan mengembalikan sebuah element `<h1>Hello,
+   Sara</h1` sebagai hasilnya.
+4. React DOM dengan efisien akan mengupdate DOM yang sesuai `<h1>Hello, Sara`.
 
 >**Catatan:** Selalu awali nama komponen dengan sebuah huruf kapital.
 >
->React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
 >React memperlakukan awalan komponen dengan huruf kecil sebagai tag dari DOM.
 >Sebagai contoh, `<div />`, merepresentasikan sebuah HTML div tag, tetapi
 >`<Welcome />` merepresentasikan sebuah komponen dan membutuhkan Welcome to be
 >in scope.
 >
->Kamu dapat membaca lebih lanjut tentang alasan dibalik Konvensi [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Anda dapat membaca lebih lanjut tentang alasan dibalik Konvensi [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
-## Composing Components {#composing-components}
 ## Menyusun Komponen {#composing-components}
 
 Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
@@ -117,13 +111,12 @@ abstraksi dari komponen yang sama untuk semua level detail. Sebuah tombol,
 sebuah formulir, sebuah dialog, sebuah tampilan: di dalam aplikasi React,  semua
 ... dalam bentuk komponen.
 
-For example, we can create an `App` component that renders `Welcome` many times:
 Sebagai contoh, kita dapat membuat sebuah komponen `App` yang mencetak `Welcome`
 berkali - kali.
 
 ```js{8-10}
 function Welcome(props) {
-  return <h1>Halo, {props.name}</h1>;
+  return <h1>Hello, {props.name}</h1>;
 }
 
 function App() {
@@ -144,17 +137,16 @@ ReactDOM.render(
 
 [](codepen://components-and-props/composing-components)
 
-Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
 Secara khusus, aplikasi React yang baru mempunyai sebuah komponen `App` pada
-bagian paling atas. Namun, jika kamu mengintegrasi React kedalam
+bagian paling atas. Namun, jika anda mengintegrasi React kedalam aplikasi yang
+ada, anda mungkin akan memulai secara *bottom-up* dengan komponen yang kecil
+seperti `Button` dan secara bertahap bekerja kedalam hierarki paling atas.
 
-## Extracting Components {#extracting-components}
+## Mengekstraksi Komponen {#extracting-components}
 
-Don't be afraid to split components into smaller components.
-Jangan takut untuk memisahkan komponen ke dalam bentuk yang lebih kecil.
+Jangan ragu untuk memisahkan komponen ke dalam bentuk yang lebih kecil.
 
-For example, consider this `Comment` component:
-Sebagai contoh, 
+Sebagai contoh, pertimbangkan komponen `Comment` berikut ini:
 
 ```js
 function Comment(props) {
@@ -182,13 +174,15 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
 Komponen menerima `author` (sebuah objek), `text` (sebuah string), dan `date`
 (sebuah tanggal) sebagai props, dan mendeskripsikan sebuah komponen dalam
+website media sosial.
 
-This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
+Komponen ini sedikit rumit untuk diganti karena semua berada dalam sarang, dan
+itu juga sulit untuk digunakan kembali sebagai komponen pribadi. Mari
+mengekstraksi beberapa komponen darinya:
 
-First, we will extract `Avatar`:
+Pertama, kita akan mengekstraksi `Avatar`:
 
 ```js{3-6}
 function Avatar(props) {
@@ -202,11 +196,14 @@ function Avatar(props) {
 ```
 
 The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
+`Avatar` tidak perlu mengetahu bahwa komponen ini di render dalam sebuah
+`Comment`. Ini mengapa kita harus memberikan *prop* lebih umum seperti: `user`
+daripada `author`.
 
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
-Kami merekomendasikan
+Kami merekomendasikan penamaan *prop* from the component's own point of view
+daripada konteks bagaimana komponen tersebut digunakan.
 
-We can now simplify `Comment` a tiny bit:
+Kita sekarang dapat sedikit menyederhanakan `Comment`:
 
 ```js{5}
 function Comment(props) {
@@ -229,7 +226,8 @@ function Comment(props) {
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+Selanjutnya, kita akan mengekstraksi sebuah komponen `UserInfo` yang me-render
+sebuah komponen `Avatar` di sebelah nama pengguna:
 
 ```js{3-8}
 function UserInfo(props) {
@@ -244,7 +242,7 @@ function UserInfo(props) {
 }
 ```
 
-This lets us simplify `Comment` even further:
+Ini memungkinkan kita untuk menyederhanakan `Comment` lebih jauh:
 
 ```js{4}
 function Comment(props) {
@@ -264,11 +262,17 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components-continued)
 
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
+Mengekstraksi komponen mungkin terlihat seperti pekerjaan yang kasar pada
+awalnya, namun mempunyai palet dari komponen yang bisa digunakan kembali akan
+terbayar pada aplikasi yang lebih besar. Aturan praktik yang bagus adalah jika
+pada bagian dari UI digunakan beberapa kali (Button, Panel, Avatar), atau yang cukup
+kompleks (App, FeedStory, Comment), ini merupakan kandidat yang bagus untuk
+dijadikan sebagai komponen yang dapat digunakan kembali.
 
-## Props are Read-Only {#props-are-read-only}
+## Props hanya Read-Only {#props-are-read-only}
 
-Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
+Apakah anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
+kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. it must never modify its own props. Pertimbangkan fungsi `sum` ini:
 
 ```js
 function sum(a, b) {
@@ -276,9 +280,12 @@ function sum(a, b) {
 }
 ```
 
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
+Fungsi seperti itu disebut ["pure"](https://en.wikipedia.org/wiki/Pure_function)
+karena mereka tidak mencoba untuk mengganti masukan mereka, dan selalu
+mengembalikan hasil yang sama untuk setiap masukan yang sama.
 
-In contrast, this function is impure because it changes its own input:
+Sebaliknya, fungsi dibawah bukan merupakan fungsi yang murni karna itu telah
+mengubah masukannya:
 
 ```js
 function withdraw(account, amount) {
@@ -286,10 +293,9 @@ function withdraw(account, amount) {
 }
 ```
 
-React is pretty flexible but it has a single strict rule:
-React sangat fleksibel tapi mempunyai satu peraturan yang ketat:
+React sangat fleksibel namun memiliki suatu peraturan yang ketat:
 
-**All React components must act like pure functions with respect to their props.**
+**Semua komponen React harus bertindak seperti fungsi yang murni dengan
+menghargai properti mereka.**
 
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
-Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya]()
+Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang "state". State memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.

From e55634396a259b49a277d9f07cd81f621d13996f Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Tue, 12 Feb 2019 14:21:10 +0800
Subject: [PATCH 3/9] edit semantics

---
 content/docs/components-and-props.md | 51 +++++++++++++---------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 7ec03bb3a..e4add7e49 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,9 +16,9 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Komponen mempermudah anda untuk memecah UI menjadi bagian tersendiri, potongan yang bisa digunakan kembali, dan berpikir tentang setiap potongan di dalam lingkungan.
+Komponen mempermudah anda untuk memecah UI menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
 
-Secara konsep, komponen mirip dengan fungsi di Javascript. Mereka menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
+Secara konsep, komponen mirip dengan fungsi di Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
 
 ## Fungsi dan Komponen Kelas {#function-and-class-components}
 
@@ -31,7 +31,7 @@ function Welcome(props) {
 }
 ```
 
-Fungsi ini adalah komponen React yang benar karena menerima sebuah *"props"*
+Fungsi ini adalah komponen React yang sah karena menerima sebuah *"props"*
 tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian
 sebuah Elemen React. Kita menyebut komponen karena itu benar - benear merupakan fungsi
 Javascript.
@@ -46,11 +46,11 @@ class Welcome extends React.Component {
 }
 ```
 
-Kedua komponen di atas mempunyai nilai yang sama dalam sudut pandang React.
+Dari sudut pandang React, kedua komponen di atas mempunyai nilai yang sama.
 
-Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai disitu, kita akan menggunakan fungsi komponen untuk mempersingkat mereka.
+Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai disini, kita akan menggunakan komponen fungsional untuk mempersingkatnya.
 
-## Me-render sebuah Komponen {#rendering-a-component}
+## Me-*render* sebuah Komponen {#rendering-a-component}
 
 Sebelumnya, kita hanya menemui elemen React yang mewakili tag DOM:
 
@@ -65,11 +65,11 @@ oleh pengguna:
 const element = <Welcome name="Sara" />;
 ```
 
-When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
 Ketika React melihat sebuah element mewakili sebuah komponen yang dibuat oleh
-pengguna,
+pengguna, komponen mengoper atribut JSX ke dalam komponen ini sebagai
+*single-object*.
 
-Sebagai contoh, kode ini akan me-render "Hello, Sara" pada halaman:
+Sebagai contoh, kode ini akan me-*render* "Hello, Sara" pada halaman:
 
 ```js{1,5}
 function Welcome(props) {
@@ -105,11 +105,10 @@ Mari merangkum apa yang terjadi pada contoh kali ini:
 
 ## Menyusun Komponen {#composing-components}
 
-Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
-Komponen dapat merujuk ke komponen lain pada akhirnya. Ini memungkinkan kita untuk menggunakan
-abstraksi dari komponen yang sama untuk semua level detail. Sebuah tombol,
-sebuah formulir, sebuah dialog, sebuah tampilan: di dalam aplikasi React,  semua
-... dalam bentuk komponen.
+Komponen dapat merujuk ke komponen lain pada output mereka. Ini memungkinkan kita untuk menggunakan
+abstraksi dari komponen yang sama untuk semua tingkat detail. Sebuah tombol,
+sebuah *form*, sebuah dialog, sebuah tampilan: di dalam aplikasi React, semua
+itu dinyatakan dalam bentuk komponen.
 
 Sebagai contoh, kita dapat membuat sebuah komponen `App` yang mencetak `Welcome`
 berkali - kali.
@@ -140,7 +139,7 @@ ReactDOM.render(
 Secara khusus, aplikasi React yang baru mempunyai sebuah komponen `App` pada
 bagian paling atas. Namun, jika anda mengintegrasi React kedalam aplikasi yang
 ada, anda mungkin akan memulai secara *bottom-up* dengan komponen yang kecil
-seperti `Button` dan secara bertahap bekerja kedalam hierarki paling atas.
+seperti `Button` dan secara bertahap kedalam hierarki paling atas.
 
 ## Mengekstraksi Komponen {#extracting-components}
 
@@ -195,13 +194,11 @@ function Avatar(props) {
 }
 ```
 
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
-`Avatar` tidak perlu mengetahu bahwa komponen ini di render dalam sebuah
+`Avatar` tidak perlu tahu bahwa komponen ini di *render* di dalam sebuah
 `Comment`. Ini mengapa kita harus memberikan *prop* lebih umum seperti: `user`
 daripada `author`.
 
-Kami merekomendasikan penamaan *prop* from the component's own point of view
-daripada konteks bagaimana komponen tersebut digunakan.
+Kami merekomendasikan penamaan *prop* melalui sudut pandang component itu sendiri daripada konteks bagaimana komponen tersebut digunakan.
 
 Kita sekarang dapat sedikit menyederhanakan `Comment`:
 
@@ -226,7 +223,7 @@ function Comment(props) {
 }
 ```
 
-Selanjutnya, kita akan mengekstraksi sebuah komponen `UserInfo` yang me-render
+Selanjutnya, kita akan mengekstraksi sebuah komponen `UserInfo` yang me-*render*
 sebuah komponen `Avatar` di sebelah nama pengguna:
 
 ```js{3-8}
@@ -263,16 +260,16 @@ function Comment(props) {
 [](codepen://components-and-props/extracting-components-continued)
 
 Mengekstraksi komponen mungkin terlihat seperti pekerjaan yang kasar pada
-awalnya, namun mempunyai palet dari komponen yang bisa digunakan kembali akan
+awalnya, namun mempunyai *pallete* dari komponen yang bisa digunakan kembali akan
 terbayar pada aplikasi yang lebih besar. Aturan praktik yang bagus adalah jika
-pada bagian dari UI digunakan beberapa kali (Button, Panel, Avatar), atau yang cukup
+pada bagian dari UI digunakan beberapa kali (*Button*, *Panel*, *Avatar*), atau yang cukup
 kompleks (App, FeedStory, Comment), ini merupakan kandidat yang bagus untuk
 dijadikan sebagai komponen yang dapat digunakan kembali.
 
-## Props hanya Read-Only {#props-are-read-only}
+## Props adalah *Read-Only* {#props-are-read-only}
 
 Apakah anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
-kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. it must never modify its own props. Pertimbangkan fungsi `sum` ini:
+kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. Pertimbangkan fungsi `sum` ini:
 
 ```js
 function sum(a, b) {
@@ -280,7 +277,7 @@ function sum(a, b) {
 }
 ```
 
-Fungsi seperti itu disebut ["pure"](https://en.wikipedia.org/wiki/Pure_function)
+Fungsi seperti itu disebut ["*pure*"](https://en.wikipedia.org/wiki/Pure_function)
 karena mereka tidak mencoba untuk mengganti masukan mereka, dan selalu
 mengembalikan hasil yang sama untuk setiap masukan yang sama.
 
@@ -295,7 +292,7 @@ function withdraw(account, amount) {
 
 React sangat fleksibel namun memiliki suatu peraturan yang ketat:
 
-**Semua komponen React harus bertindak seperti fungsi yang murni dengan
-menghargai properti mereka.**
+**Semua komponen React harus bertindak seperti fungsi yang murni
+sehubungan dengan properti mereka.**
 
 Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang "state". State memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.

From 4bebe39ca1eec5ff59d22efa199e226f108f90b7 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Sat, 16 Feb 2019 22:33:08 +0800
Subject: [PATCH 4/9] fixing some translated word properly

---
 content/docs/components-and-props.md | 44 ++++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index e4add7e49..f083bba08 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,9 +16,9 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Komponen mempermudah anda untuk memecah UI menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
+Komponen mempermudah anda untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
 
-Secara konsep, komponen mirip dengan fungsi di Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element react yang mendeskripsikan apa yang seharusnya tampil di layar.
+Secara konsep, komponen mirip dengan fungsi di Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil di layar.
 
 ## Fungsi dan Komponen Kelas {#function-and-class-components}
 
@@ -27,7 +27,7 @@ menuliskan sebuah fungsi Javascript:
 
 ```js
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Halo, {props.name}</h1>;
 }
 ```
 
@@ -41,7 +41,7 @@ Anda juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Halo, {this.props.name}</h1>;
   }
 }
 ```
@@ -50,9 +50,9 @@ Dari sudut pandang React, kedua komponen di atas mempunyai nilai yang sama.
 
 Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai disini, kita akan menggunakan komponen fungsional untuk mempersingkatnya.
 
-## Me-*render* sebuah Komponen {#rendering-a-component}
+## Merender sebuah Komponen {#rendering-a-component}
 
-Sebelumnya, kita hanya menemui elemen React yang mewakili tag DOM:
+Sebelumnya, kita hanya menemui elemen React yang mewakili *tag* DOM:
 
 ```js
 const element = <div />;
@@ -69,11 +69,11 @@ Ketika React melihat sebuah element mewakili sebuah komponen yang dibuat oleh
 pengguna, komponen mengoper atribut JSX ke dalam komponen ini sebagai
 *single-object*.
 
-Sebagai contoh, kode ini akan me-*render* "Hello, Sara" pada halaman:
+Sebagai contoh, kode ini akan me-*render* "Halo, Sara" pada halaman:
 
 ```js{1,5}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Halo, {props.name}</h1>;
 }
 
 const element = <Welcome name="Sara" />;
@@ -90,22 +90,22 @@ Mari merangkum apa yang terjadi pada contoh kali ini:
 1. Kita memanggil `ReactDOM.render()` dengan elemen `<Welcome name="Sara" />`.
 2. React memanggil komponen `Welcome` dengan `{name: 'Sara'}` sebagai
    propertinya.
-3. Komponen `Welcome` kita akan mengembalikan sebuah element `<h1>Hello,
+3. Komponen `Welcome` kita akan mengembalikan sebuah element `<h1>Halo,
    Sara</h1` sebagai hasilnya.
-4. React DOM dengan efisien akan mengupdate DOM yang sesuai `<h1>Hello, Sara`.
+4. React DOM dengan efisien akan memperbarui DOM yang sesuai `<h1>Halo, Sara`.
 
 >**Catatan:** Selalu awali nama komponen dengan sebuah huruf kapital.
 >
->React memperlakukan awalan komponen dengan huruf kecil sebagai tag dari DOM.
->Sebagai contoh, `<div />`, merepresentasikan sebuah HTML div tag, tetapi
+>React memperlakukan awalan komponen dengan huruf kecil sebagai *tag* dari DOM.
+>Sebagai contoh, `<div />`, merepresentasikan sebuah HTML div *tag*, tetapi
 >`<Welcome />` merepresentasikan sebuah komponen dan membutuhkan Welcome to be
 >in scope.
 >
->Anda dapat membaca lebih lanjut tentang alasan dibalik Konvensi [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Anda dapat membaca lebih lanjut tentang alasan dibalik Konvensi tersebut [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
 ## Menyusun Komponen {#composing-components}
 
-Komponen dapat merujuk ke komponen lain pada output mereka. Ini memungkinkan kita untuk menggunakan
+Komponen dapat merujuk ke komponen lain pada keluaran mereka. Ini memungkinkan kita untuk menggunakan
 abstraksi dari komponen yang sama untuk semua tingkat detail. Sebuah tombol,
 sebuah *form*, sebuah dialog, sebuah tampilan: di dalam aplikasi React, semua
 itu dinyatakan dalam bentuk komponen.
@@ -115,7 +115,7 @@ berkali - kali.
 
 ```js{8-10}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Halo, {props.name}</h1>;
 }
 
 function App() {
@@ -138,7 +138,7 @@ ReactDOM.render(
 
 Secara khusus, aplikasi React yang baru mempunyai sebuah komponen `App` pada
 bagian paling atas. Namun, jika anda mengintegrasi React kedalam aplikasi yang
-ada, anda mungkin akan memulai secara *bottom-up* dengan komponen yang kecil
+ada, Anda mungkin akan memulai secara *bottom-up* dengan komponen yang kecil
 seperti `Button` dan secara bertahap kedalam hierarki paling atas.
 
 ## Mengekstraksi Komponen {#extracting-components}
@@ -174,8 +174,8 @@ function Comment(props) {
 [](codepen://components-and-props/extracting-components)
 
 Komponen menerima `author` (sebuah objek), `text` (sebuah string), dan `date`
-(sebuah tanggal) sebagai props, dan mendeskripsikan sebuah komponen dalam
-website media sosial.
+(sebuah tanggal) sebagai *props*, dan mendeskripsikan sebuah komponen dalam
+situs media sosial.
 
 Komponen ini sedikit rumit untuk diganti karena semua berada dalam sarang, dan
 itu juga sulit untuk digunakan kembali sebagai komponen pribadi. Mari
@@ -195,10 +195,10 @@ function Avatar(props) {
 ```
 
 `Avatar` tidak perlu tahu bahwa komponen ini di *render* di dalam sebuah
-`Comment`. Ini mengapa kita harus memberikan *prop* lebih umum seperti: `user`
+`Comment`. Ini mengapa kita harus memberikan *props* yang lebih umum seperti: `user`
 daripada `author`.
 
-Kami merekomendasikan penamaan *prop* melalui sudut pandang component itu sendiri daripada konteks bagaimana komponen tersebut digunakan.
+Kami merekomendasikan penamaan *props* melalui sudut pandang komponen itu sendiri daripada konteks bagaimana komponen tersebut digunakan.
 
 Kita sekarang dapat sedikit menyederhanakan `Comment`:
 
@@ -266,7 +266,7 @@ pada bagian dari UI digunakan beberapa kali (*Button*, *Panel*, *Avatar*), atau
 kompleks (App, FeedStory, Comment), ini merupakan kandidat yang bagus untuk
 dijadikan sebagai komponen yang dapat digunakan kembali.
 
-## Props adalah *Read-Only* {#props-are-read-only}
+## Props bersifat *Read-Only* {#props-are-read-only}
 
 Apakah anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
 kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. Pertimbangkan fungsi `sum` ini:
@@ -295,4 +295,4 @@ React sangat fleksibel namun memiliki suatu peraturan yang ketat:
 **Semua komponen React harus bertindak seperti fungsi yang murni
 sehubungan dengan properti mereka.**
 
-Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang "state". State memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.
+Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang *"state"*. *State* memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.

From 77f1bee264690f7bc6a355e203ec1279ac40bae3 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Sun, 17 Feb 2019 21:16:09 +0800
Subject: [PATCH 5/9] fixing typo

---
 content/docs/components-and-props.md | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index f083bba08..e21756bf5 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,7 +16,7 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Komponen mempermudah anda untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
+Komponen mempermudah Anda untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
 
 Secara konsep, komponen mirip dengan fungsi di Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil di layar.
 
@@ -31,10 +31,7 @@ function Welcome(props) {
 }
 ```
 
-Fungsi ini adalah komponen React yang sah karena menerima sebuah *"props"*
-tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian
-sebuah Elemen React. Kita menyebut komponen karena itu benar - benear merupakan fungsi
-Javascript.
+Fungsi ini adalah komponen React yang sah karena menerima sebuah *"props"* tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian sebuah Elemen React. Kita menyebut komponen karena itu benar - benar merupakan fungsi Javascript.
 
 Anda juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) untuk mendefinisikan sebuah komponen:
 
@@ -137,7 +134,7 @@ ReactDOM.render(
 [](codepen://components-and-props/composing-components)
 
 Secara khusus, aplikasi React yang baru mempunyai sebuah komponen `App` pada
-bagian paling atas. Namun, jika anda mengintegrasi React kedalam aplikasi yang
+bagian paling atas. Namun, jika Anda mengintegrasi React kedalam aplikasi yang
 ada, Anda mungkin akan memulai secara *bottom-up* dengan komponen yang kecil
 seperti `Button` dan secara bertahap kedalam hierarki paling atas.
 
@@ -268,7 +265,7 @@ dijadikan sebagai komponen yang dapat digunakan kembali.
 
 ## Props bersifat *Read-Only* {#props-are-read-only}
 
-Apakah anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
+Apakah Anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
 kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. Pertimbangkan fungsi `sum` ini:
 
 ```js

From 031fa98aec5f3f3958c9bd964d193e98ae085491 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Wed, 20 Feb 2019 10:52:03 +0800
Subject: [PATCH 6/9] fixing translated word

---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index e21756bf5..b01f87fa2 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -18,7 +18,7 @@ next: state-and-lifecycle.html
 
 Komponen mempermudah Anda untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
 
-Secara konsep, komponen mirip dengan fungsi di Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil di layar.
+Secara konsep, komponen mirip dengan fungsi pada Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil pada layar.
 
 ## Fungsi dan Komponen Kelas {#function-and-class-components}
 

From fb32f0dfc3cc9058eb83c95e52d1c2cc31e8d2fd Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Wed, 20 Feb 2019 18:40:55 +0800
Subject: [PATCH 7/9] fixing error space

---
 content/docs/components-and-props.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index b01f87fa2..202081c2e 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -55,7 +55,7 @@ Sebelumnya, kita hanya menemui elemen React yang mewakili *tag* DOM:
 const element = <div />;
 ```
 
-Namun, elemen juga dapat mewakilkan komponen yang di definisikan
+Namun, elemen juga dapat mewakilkan komponen yang didefinisikan
 oleh pengguna:
 
 ```js
@@ -66,7 +66,7 @@ Ketika React melihat sebuah element mewakili sebuah komponen yang dibuat oleh
 pengguna, komponen mengoper atribut JSX ke dalam komponen ini sebagai
 *single-object*.
 
-Sebagai contoh, kode ini akan me-*render* "Halo, Sara" pada halaman:
+Sebagai contoh, kode ini akan me-*render* "Halo, Sara" pada laman:
 
 ```js{1,5}
 function Welcome(props) {
@@ -82,7 +82,7 @@ ReactDOM.render(
 
 [](codepen://components-and-props/rendering-a-component)
 
-Mari merangkum apa yang terjadi pada contoh kali ini:
+Mari merangkum apa yang terjadi pada contoh berikut:
 
 1. Kita memanggil `ReactDOM.render()` dengan elemen `<Welcome name="Sara" />`.
 2. React memanggil komponen `Welcome` dengan `{name: 'Sara'}` sebagai
@@ -266,7 +266,7 @@ dijadikan sebagai komponen yang dapat digunakan kembali.
 ## Props bersifat *Read-Only* {#props-are-read-only}
 
 Apakah Anda mendeklarasikan sebuah komponen [sebagai sebuah fungsi atau sebuah
-kelas](#function-and-class-components), jangan pernah mengganti properti nya sendiri. Pertimbangkan fungsi `sum` ini:
+kelas](#function-and-class-components), jangan pernah mengganti propertinya sendiri. Pertimbangkan fungsi `sum` ini:
 
 ```js
 function sum(a, b) {
@@ -275,10 +275,10 @@ function sum(a, b) {
 ```
 
 Fungsi seperti itu disebut ["*pure*"](https://en.wikipedia.org/wiki/Pure_function)
-karena mereka tidak mencoba untuk mengganti masukan mereka, dan selalu
+karena mereka tidak mencoba untuk mengganti masukan mereka dan selalu
 mengembalikan hasil yang sama untuk setiap masukan yang sama.
 
-Sebaliknya, fungsi dibawah bukan merupakan fungsi yang murni karna itu telah
+Sebaliknya, fungsi dibawah bukan merupakan fungsi yang murni karena hal itu telah
 mengubah masukannya:
 
 ```js

From d2f7966a383ea5eaa8fd286003e7f8181ca58233 Mon Sep 17 00:00:00 2001
From: Andre Pratama <andreepratama27@gmail.com>
Date: Wed, 6 Mar 2019 14:13:32 +0800
Subject: [PATCH 8/9] fixing incomplete translate

---
 content/docs/components-and-props.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 202081c2e..61e678639 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -17,6 +17,8 @@ next: state-and-lifecycle.html
 ---
 
 Komponen mempermudah Anda untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi.
+Halaman ini memberikan pengantar tentang ide komponen. Anda dapat menemukan
+[rujukan API komponen terperinci di sini](/docs/react-component.html)
 
 Secara konsep, komponen mirip dengan fungsi pada Javascript. Komponen menerima beberapa masukan (biasa disebut *"props"*) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil pada layar.
 

From e86b12f0c53281ef33bf9686d052bb888b0a2e11 Mon Sep 17 00:00:00 2001
From: Felix Tan <regalius.contact@gmail.com>
Date: Sat, 9 Mar 2019 16:49:49 +0700
Subject: [PATCH 9/9] docs: minor fixes

---
 content/docs/components-and-props.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 61e678639..73028c0de 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -33,7 +33,7 @@ function Welcome(props) {
 }
 ```
 
-Fungsi ini adalah komponen React yang sah karena menerima sebuah *"props"* tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian sebuah Elemen React. Kita menyebut komponen karena itu benar - benar merupakan fungsi Javascript.
+Fungsi ini adalah komponen React yang sah karena menerima sebuah *"props"* tunggal (yang bertindak sebagai *props*) atau argumen objek dengan data dan kembalian sebuah elemen React. Kita menyebut komponen karena itu benar-benar merupakan fungsi Javascript.
 
 Anda juga dapat menggunakan sebuah [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) untuk mendefinisikan sebuah komponen:
 
@@ -47,7 +47,7 @@ class Welcome extends React.Component {
 
 Dari sudut pandang React, kedua komponen di atas mempunyai nilai yang sama.
 
-Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai disini, kita akan menggunakan komponen fungsional untuk mempersingkatnya.
+Kelas mempunyai beberapa fitur tambahan yang akan kita diskusikan di [sesi selanjutnya](/docs/state-and-lifecycle.html). Sampai di sini, kita akan menggunakan komponen fungsional untuk mempersingkatnya.
 
 ## Merender sebuah Komponen {#rendering-a-component}
 
@@ -100,7 +100,7 @@ Mari merangkum apa yang terjadi pada contoh berikut:
 >`<Welcome />` merepresentasikan sebuah komponen dan membutuhkan Welcome to be
 >in scope.
 >
->Anda dapat membaca lebih lanjut tentang alasan dibalik Konvensi tersebut [disini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Anda dapat membaca lebih lanjut tentang alasan dibalik Konvensi tersebut [di sini.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
 ## Menyusun Komponen {#composing-components}
 
@@ -110,7 +110,7 @@ sebuah *form*, sebuah dialog, sebuah tampilan: di dalam aplikasi React, semua
 itu dinyatakan dalam bentuk komponen.
 
 Sebagai contoh, kita dapat membuat sebuah komponen `App` yang mencetak `Welcome`
-berkali - kali.
+berkali-kali.
 
 ```js{8-10}
 function Welcome(props) {
@@ -261,7 +261,7 @@ function Comment(props) {
 Mengekstraksi komponen mungkin terlihat seperti pekerjaan yang kasar pada
 awalnya, namun mempunyai *pallete* dari komponen yang bisa digunakan kembali akan
 terbayar pada aplikasi yang lebih besar. Aturan praktik yang bagus adalah jika
-pada bagian dari UI digunakan beberapa kali (*Button*, *Panel*, *Avatar*), atau yang cukup
+pada bagian dari antarmuka pengguna digunakan beberapa kali (*Button*, *Panel*, *Avatar*), atau yang cukup
 kompleks (App, FeedStory, Comment), ini merupakan kandidat yang bagus untuk
 dijadikan sebagai komponen yang dapat digunakan kembali.
 
@@ -294,4 +294,4 @@ React sangat fleksibel namun memiliki suatu peraturan yang ketat:
 **Semua komponen React harus bertindak seperti fungsi yang murni
 sehubungan dengan properti mereka.**
 
-Tentu saja, UI dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang *"state"*. *State* memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.
+Tentu saja, antarmuka pengguna dari aplikasi akan dinamis dan selalu berganti. Di [sesi selanjutnya](), kita akan memperkenalkan sebuah konsep baru tentang *"state"*. *State* memperbolehkan komponen React untuk mengganti keluaran mereka secara berkala untuk merespon aksi dari pengguna, respon dari jaringan, dan yang lainnya, tanpa melanggar aturan.