Translate Composition vs Inheritance

content/docs/composition-vs-inheritance.md

@@ -1,22 +1,22 @@
 ---
 id: composition-vs-inheritance
-title: Composition vs Inheritance
+title: Komposisi vs Pewarisan
 permalink: docs/composition-vs-inheritance.html
 redirect_from:
  - "docs/multiple-components.html"
 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 (
  <FancyBorder color="blue">
  <h1 className="Dialog-title">
-Welcome
+Selamat Datang
  </h1>
  <p className="Dialog-message">
-Thank you for visiting our spacecraft!
+Terima kasih telah mengunjungi pesawat luar angkasa kami!
  </p>
  </FancyBorder>
  );
 }
 ```
 
-**[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 `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
+Apapun yang berada di dalam tag JSX `<FancyBorder>` akan dioper ke komponen `FancyBorder` sebagai *props* `children`. Karena `FancyBorder` me-*render* `{props.children}` di dalam sebuah `<div>`, 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 `<Contacts />` and `<Chat />` 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 `<Contacts />` dan `<Chat />` 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 (
  <Dialog
- title="Welcome"
- message="Thank you for visiting our spacecraft!" />
+ 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 (
- <Dialog title="Mars Exploration Program"
- message="How should we refer to you?">
+ <Dialog title="Program Eksplorasi Mars"
+ message="Bagaimana kami memanggil anda?">
  <input value={this.state.login}
  onChange={this.handleChange} />
  <button onClick={this.handleSignUp}>
-Sign Me Up!
+Daftarkan Saya!
  </button>
  </Dialog>
  );
@@ -156,17 +156,17 @@ class SignUpDialog extends React.Component {
  }
 
  handleSignUp() {
- alert(`Welcome aboard, ${this.state.login}!`);
+ alert(`Selamat Datang, ${this.state.login}!`);
  }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
 
-## So What About Inheritance? {#so-what-about-inheritance}
+## Lalu Bagaimana Dengan Pewarisan? {#so-what-about-inheritance}
 
-At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
+Di Facebook, kami telah menggunakan React untuk ribuan komponen, dan kami belum menemukan satu pun kasus di mana kami merekomendasikan pembuatan komponen secara pewarisan.
 
-Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
+*props* dan komposisi memberikan Anda semua fleksibilitas yang Anda butuhkan untuk mengkustomisasi tampilan dan perilaku sebuah komponen secara eksplisit dan aman. Perlu diingat bahwa komponen dapat menerima *props* apapun, termasuk nilai-nilai primitif, elemen React, atau fungsi.
 
-If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
+Jika Anda berniat untuk menggunakan kembali fungsionalitas yang bersifat non-antarmuka pengguna, kami menyarankan agar Anda mengekstraknya ke dalam sebuah modul JavaScript terpisah. Komponen kemudian dapat mengimpornya untuk menggunakan fungsi, objek, atau kelas tersebut, tanpa perlu mewarisinya.