diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md
index c86735ef7..e6aab995c 100644
--- a/content/docs/composition-vs-inheritance.md
+++ b/content/docs/composition-vs-inheritance.md
@@ -1,6 +1,6 @@
---
id: composition-vs-inheritance
-title: Composition vs Inheritance
+title: Komposisi vs Pewarisan
permalink: docs/composition-vs-inheritance.html
redirect_from:
- "docs/multiple-components.html"
@@ -8,15 +8,15 @@ prev: lifting-state-up.html
next: thinking-in-react.html
---
-React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
+React memiliki model/gaya komposisi yang cukup *powerful*, dan kami merekomendasikan penggunaan komposisi dibandingkan pewarisan (*inheritance*) untuk menggunakan kembali kode antar komponen.
-In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.
+Pada bagian ini, kita akan melihat beberapa kasus di mana para pengembang yang baru mengenal React sering kali akan mencoba menerapkan pewarisan, dan kami akan menunjukkan bagaimana kita dapat menyelesaikan kasus-kasus tersebut dengan komposisi.
-## Containment {#containment}
+## Kontainmen {#containment}
-Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes".
+Beberapa komponen tidak serta-merta mengetahui komponen anak mereka (*children*) ketika mereka didefinisikan. Kasus ini umum terjadi khususnya untuk komponen seperti `Sidebar` atau `Dialog` yang merepresentasikan komponen "kotak" biasa.
-We recommend that such components use the special `children` prop to pass children elements directly into their output:
+Kami merekomendasikan komponen-komponen seperti ini untuk menggunakan *props* spesial bernama `children` untuk menambahkan elemen-elemen anak secara langsung di keluaran mereka:
```js{4}
function FancyBorder(props) {
@@ -28,28 +28,28 @@ function FancyBorder(props) {
}
```
-This lets other components pass arbitrary children to them by nesting the JSX:
+Ini memungkinkan komponen lain untuk menambahkan komponen anak apapun dengan menyarangkan JSX seperti ini:
```js{4-9}
function WelcomeDialog() {
return (
- Welcome
+ Selamat Datang
- Thank you for visiting our spacecraft!
+ Terima kasih telah mengunjungi pesawat luar angkasa kami!
);
}
```
-**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
+**[Coba di CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
-Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output.
+Apapun yang berada di dalam tag JSX `` akan dioper ke komponen `FancyBorder` sebagai *props* `children`. Karena `FancyBorder` me-*render* `{props.children}` di dalam sebuah `
`, elemen yang dioper tersebut akan muncul di hasil keluaran akhirnya.
-While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`:
+Walaupun kasus seperti ini jarang terjadi, terkadang Anda mungkin membutuhkan beberapa "lubang" di dalam sebuah komponen. Dalam kasus seperti ini Anda dapat menggunakan konvensi anda sendiri alih-alih menggunakan `children`:
```js{5,8,18,21}
function SplitPane(props) {
@@ -78,15 +78,15 @@ function App() {
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
-React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React.
+Elemen-elemen React seperti `` dan `` sebenarnya hanya objek biasa, oleh karenanya Anda dapat mengoper mereka sebagai *props* selayaknya data lain. Pendekatan ini mungkin mengingatkan Anda dengan "slot" di *library* lain namun tidak ada batasan apapun mengenai apa yang dapat Anda oper sebagai *props* di React.
-## Specialization {#specialization}
+## Spesialisasi {#specialization}
-Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.
+Terkadang kita menganggap beberapa komponen sebagai "kasus spesial" dari komponen lainnya. Sebagai contoh, kita dapat menganggap sebuah komponen `WelcomeDialog` sebagai kasus spesial dari `Dialog`.
-In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
+Di React, kasus seperti ini juga dapat diselesaikan dengan komposisi, di mana sebuah komponen yang lebih "spesifik" me-*render* sebuah komponen yang lebih "umum" dan mengkonfigurasinya menggunakan *props*:
```js{5,8,16-18}
function Dialog(props) {
@@ -105,15 +105,15 @@ function Dialog(props) {
function WelcomeDialog() {
return (
+ title="Selamat Datang"
+ message="Terima kasih telah mengunjungi pesawat luar angkasa kami!" />
);
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
-Composition works equally well for components defined as classes:
+Komposisi juga bekerja sama baiknya untuk komponen yang didefinisikan menggunakan kelas:
```js{10,27-31}
function Dialog(props) {
@@ -140,12 +140,12 @@ class SignUpDialog extends React.Component {
render() {
return (
-