Translate Forwarding Refs (#205)

Author: agallio

content/docs/forwarding-refs.md

@@ -4,73 +4,69 @@ title: Forwarding Refs
 permalink: docs/forwarding-refs.html
 ---
 
-Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
+*Ref forwarding* adalah sebuah teknik untuk meneruskan [ref](/docs/refs-and-the-dom.html) secara otomatis melalui komponen ke salah satu anaknya. Ini biasanya tidak diperlukan untuk sebagian besar komponen dalam aplikasi. Namun, ini bisa berguna untuk beberapa jenis komponen, terutama di pustaka komponen yang dapat digunakan kembali. Skenario paling umum dijelaskan di bawah ini.
 
-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## Mengoper refs ke komponen DOM {#forwarding-refs-to-dom-components}
 
-Consider a `FancyButton` component that renders the native `button` DOM element:
+Pertimbangkan sebuah komponen `FancyButton` yang me-render native DOM element yaitu `button`:
 `embed:forwarding-refs/fancy-button-simple.js`
 
-React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much.
+Komponen React menyembunyikan detail implementasi mereka, termasuk keluaran render mereka. Komponen-komponen lainnya yang menggunakan `FancyButton` **biasanya tidak perlu untuk** [mendapatkan sebuah ref](/docs/refs-and-the-dom.html) ke dalam DOM element `button`. Ini bagus karena hal ini mencegah komponen untuk bersandar pada struktur DOM komponen lain yang berlebihan.
 
-Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
+Meskipun enkapsulasi seperti itu diperlukan oleh komponen yang berada di application-level seperti `FeedStory` atau `Comment`, namun hal tersebut dapat menyulitkan komponen-komponen "leaf" yang sering digunakan kembali seperti `FancyButton` atau `MyTextInput`. Komponen ini cenderung digunakan di seluruh aplikasi dengan cara yang sama seperti regular DOM `button` dan `input`, dan mungkin tidak dapat dihindari mengakses DOM nodes mereka untuk mengelola focus, selection, atau animation.
 
-**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.**
-
-In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders:
+**Ref forwarding adalah sebuah fitur keikutsertaan yang memperbolehkan beberapa komponen-komponen mengambil sebuah `ref` yang didapatkan, dan menurunkannya (dengan kata lain, "meneruskan" nya) kepada child.**
 
+Pada contoh di bawah ini, `FancyButton` menggunakan `React.forwardRef` untuk mendapatkan `ref` yang diteruskan kepadanya, lalu meneruskannya ke `button` DOM yang di render:
 `embed:forwarding-refs/fancy-button-simple-ref.js`
 
-This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+Dengan cara ini, komponen-komponen yang menggunakan `FancyButton` bisa mendapatkan ref ke DOM node `button` yang mendasarinya dan mengaksesnya jika perlu - sama seperti jika mereka menggunakan `button` DOM secara langsung. 
 
-Here is a step-by-step explanation of what happens in the above example:
+Berikut adalah penjelasan langkah demi langkah tentang apa yang terjadi pada contoh di atas:
 
-1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable.
-1. We pass our `ref` down to `<FancyButton ref={ref}>` by specifying it as a JSX attribute.
-1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument.
-1. We forward this `ref` argument down to `<button ref={ref}>` by specifying it as a JSX attribute.
-1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
+1. Kita buat sebuah [React ref](/docs/refs-and-the-dom.html) dengan memanggil `React.createRef` dan masukan kedalam variabel `ref`.
+1. Kita teruskan `ref` tersebut ke `<FancyButton ref={ref}>` dengan menulisnya sebagai atribut JSX.
+1. React meneruskan `ref` ke fungsi `(props, ref) => ...` di dalam `forwardRef` sebagai argumen kedua.
+1. Kita teruskan argumen `ref` tersebut ke `<button ref={ref}>` dengan menulisnya sebagai atribut JSX.
+1. Jika ref sudah terpasang, `ref.current` akan mengarah ke DOM node `<button>`.
 
->Note
+>Catatan
 >
->The second `ref` argument only exists when you define a component with `React.forwardRef` call. Regular function or class components don't receive the `ref` argument, and ref is not available in props either.
+>Argumen `ref` kedua hanya ada saat Anda mendefinisikan komponen dengan `React.forwardRef`. Regular function atau class components tidak menerima argumen `ref` tersebut, dan ref juga tidak teredia di props.
 >
->Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
+>Ref forwarding tidak terbatas pada komponen DOM. Anda juga dapat meneruskan refs ke class component instances.
 
-## Note for component library maintainers {#note-for-component-library-maintainers}
+## Catatan untuk pengelola pustaka komponen {#note-for-component-library-maintainers}
 
-**When you start using `forwardRef` in a component library, you should treat it as a breaking change and release a new major version of your library.** This is because your library likely has an observably different behavior (such as what refs get assigned to, and what types are exported), and this can break apps and other libraries that depend on the old behavior.
+**Saat Anda mulai menggunakan `forwardRef` di pustaka komponen, Anda harus memperlakukannya sebagai sebuah *breaking change* dan merilis versi mayor baru pustaka Anda.** Ini karena pustaka Anda kemungkinan besar memiliki perilaku yang sangat berbeda (seperti *refs* apa yang ditetapkan, dan tipe apa yang diekspor), dan ini bisa merusak aplikasi dan pustaka lain yang bergantung pada perilaku lama.
 
-Conditionally applying `React.forwardRef` when it exists is also not recommended for the same reasons: it changes how your library behaves and can break your users' apps when they upgrade React itself.
+Menerapkan `React.forwardRef` secara kondisional jika ada juga tidak disarankan karena alasan yang sama: ini mengubah cara pustaka Anda berperilaku dan bisa merusak aplikasi pengguna Anda saat mereka meningkatkan versi React itu sendiri.
 
-## Forwarding refs in higher-order components {#forwarding-refs-in-higher-order-components}
+## Mengoper refs dalam higher-order components {#forwarding-refs-in-higher-order-components}
 
-This technique can also be particularly useful with [higher-order components](/docs/higher-order-components.html) (also known as HOCs). Let's start with an example HOC that logs component props to the console:
+Teknik ini juga bisa menjadi sangat berguna untuk [higher-order components](/docs/higher-order-components.html) (biasa disebut dengan HOCs). Mari kita mulai dengan contoh HOC yang mengeluarkan component props ke log konsol:
 `embed:forwarding-refs/log-props-before.js`
 
-The "logProps" HOC passes all `props` through to the component it wraps, so the rendered output will be the same. For example, we can use this HOC to log all props that get passed to our "fancy button" component:
+HOC "logProps" meneruskan semua `props` ke komponen yang dibungkusnya, sehingga keluaran yang dirender akan sama. Misalnya, kita dapat menggunakan HOC ini untuk mengeluarkan semua props ke log konsol yang diteruskan ke "fancy button" komponen kita:
 `embed:forwarding-refs/fancy-button.js`
 
-There is one caveat to the above example: refs will not get passed through. That's because `ref` is not a prop. Like `key`, it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.
+Ada satu peringatan untuk contoh diatas: refs tidak akan diteruskan. Itu karena `ref` bukan sebuah prop. Seperti `key`, ini ditangani secara berbeda oleh React. Jika Anda menambahkan ref ke HOC, maka ref akan merujuk ke komponen container terluar, bukan komponen yang dibungkus.
 
-This means that refs intended for our `FancyButton` component will actually be attached to the `LogProps` component:
+Ini berarti bahwa ref yang dimaksudkan untuk komponen `FancyButton` kita sebenarnya akan dilampirkan ke `LogProps` komponen:
 `embed:forwarding-refs/fancy-button-ref.js`
 
-Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
+Untungnya, kita dapat secara eksplisit meneruskan refs kedalam komponen `FancyButton` menggunakan `React.forwardRef` API. `React.forwardRef` menerima sebuah fungsi render yang menerima parameter `props` dan `ref` dan mengembalikan React node. Sebagai contoh:
 `embed:forwarding-refs/log-props-after.js`
 
-## Displaying a custom name in DevTools {#displaying-a-custom-name-in-devtools}
-
-`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
+## Menampilkan nama custom di DevTools {#displaying-a-custom-name-in-devtools}
 
-For example, the following component will appear as "*ForwardRef*" in the DevTools:
+`React.forwardRef` menerima fungsi *render*. React DevTools menggunakan fungsi ini untuk menentukan apa yang akan ditampilkan untuk komponen *ref forwarding*.
 
+Sebagai contoh, komponen berikut akan muncul sebagai "*ForwardRef*" di DevTools:
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
-
+Jika Anda menamai fungsi *render*, DevTools juga akan menyertakan namanya (misalnya "*ForwardRef(myFunction)*"):
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-You can even set the function's `displayName` property to include the component you're wrapping:
-
-`embed:forwarding-refs/customized-display-name.js`
+Anda bahkan dapat menyetel properti `displayName` pada fungsi untuk menyertakan komponen yang Anda bungkus:
+`embed:forwarding-refs/customized-display-name.js`

examples/forwarding-refs/customized-display-name.js

@@ -7,8 +7,8 @@ function logProps(Component) {
     return <LogProps {...props} forwardedRef={ref} />;
   }
 
-  // Give this component a more helpful display name in DevTools.
-  // e.g. "ForwardRef(logProps(MyComponent))"
+  // Beri komponen ini nama tampilan yang lebih berguna di DevTools.
+  // misalnya, "ForwardRef(logProps(MyComponent))"
   // highlight-range{1-2}
   const name = Component.displayName || Component.name;
   forwardRef.displayName = `logProps(${name})`;

examples/forwarding-refs/fancy-button-ref.js

@@ -3,13 +3,13 @@ import FancyButton from './FancyButton';
 // highlight-next-line
 const ref = React.createRef();
 
-// The FancyButton component we imported is the LogProps HOC.
-// Even though the rendered output will be the same,
-// Our ref will point to LogProps instead of the inner FancyButton component!
-// This means we can't call e.g. ref.current.focus()
+// Komponen FancyButton yang kita impor adalah HOC LogProps.
+// Meskipun keluaran yang dirender akan sama,
+// Ref kita akan menunjuk ke komponen LogProps daripada komponen FancyButton!
+// Ini berarti kita tidak dapat memanggil ref, seperti ref.current.focus()
 // highlight-range{4}
 <FancyButton
-  label="Click Me"
+  label="Klik saya!"
   handleClick={handleClick}
   ref={ref}
 />;

examples/forwarding-refs/fancy-button-simple-ref.js

@@ -5,6 +5,6 @@ const FancyButton = React.forwardRef((props, ref) => (
   </button>
 ));
 
-// You can now get a ref directly to the DOM button:
+// Sekarang Anda bisa mendapatkan ref langsung ke button DOM:
 const ref = React.createRef();
-<FancyButton ref={ref}>Click me!</FancyButton>;
+<FancyButton ref={ref}>Klik saya!</FancyButton>;

examples/forwarding-refs/fancy-button.js

@@ -6,7 +6,7 @@ class FancyButton extends React.Component {
   // ...
 }
 
-// Rather than exporting FancyButton, we export LogProps.
-// It will render a FancyButton though.
+// Daripada mengekspor FancyButton, kita mengekspor LogProps.
+// LogProps tetap akan me-render FancyButton.
 // highlight-next-line
 export default logProps(FancyButton);

examples/forwarding-refs/log-props-after.js

@@ -9,15 +9,15 @@ function logProps(Component) {
       // highlight-next-line
       const {forwardedRef, ...rest} = this.props;
 
-      // Assign the custom prop "forwardedRef" as a ref
+      // Masukan prop kustom "forwardedRef" sebagai ref
       // highlight-next-line
       return <Component ref={forwardedRef} {...rest} />;
     }
   }
 
-  // Note the second param "ref" provided by React.forwardRef.
-  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
-  // And it can then be attached to the Component.
+  // Catat param kedua "ref" yang disediakan oleh React.forwardRef.
+  // Kita dapat meneruskannya ke LogProps sebagai regular prop, misalnya "forwardedRef"
+  // Dan kemudian dapat dilampirkan ke Komponen.
   // highlight-range{1-3}
   return React.forwardRef((props, ref) => {
     return <LogProps {...props} forwardedRef={ref} />;