wip

src/content/learn/manipulating-the-dom-with-refs.md

@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: 'Memanipulasi DOM dengan Refs'
 ---
 
 <Intro>
 
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React secara otomatis memperbarui [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) agar sama dengan render output Anda, dengan begitu komponen Anda tidak akan sering membutuhkan manipulasi. Namun, terkadang Anda mungkin butuh mengakses elemen DOM yang diatur React--sebagai contoh, fokus ke sebuah node, gulir, atau menentukan posisi dan ukurannya. Tidak ada cara bawaan untuk melakukannya dalam React, jadi Anda butuh *ref* pada DOM node.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- Bagaimana cara mengakses sebuah DOM node yang diatur React dengan atribut `ref`
+- Bagaimana atribut `ref` JSX berelasi dengan `useRef` Hook
+- Bagaimana cara mengakses DOM node dari komponen lain
+- Dalam kasus seperti apa memodifikasi DOM yang diatur React secara aman.
 
 </YouWillLearn>
 
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## Menempatkan Ref ke sebuah node {/*getting-a-ref-to-the-node*/}
 
-To access a DOM node managed by React, first, import the `useRef` Hook:
+Untuk mengakses sebuah DOM node yang diatur React, pertama, impor Hook `useRef`:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Then, use it to declare a ref inside your component:
+Kemudian, deklarasikan *ref* di dalam komponen Anda:
 
 ```js
 const myRef = useRef(null);
 ```
 
-Finally, pass it to the DOM node as the `ref` attribute:
+Terakhir, oper ke DOM node sebagai atribut `ref`:
 
 ```js
 <div ref={myRef}>
 ```
 
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+Hook `useRef` mengembalikan objek dengan properti tunggal bernama `current`. Awalnya, `myRef.current` akan bernilai `null`. Saat React membuat DOM node untuk `<div>`, React akan mereferensikan node ini ke dalam `myRef.current`. Anda bisa mengakses DOM node ini dari [event handlers](/learn/responding-to-events) Anda dan menggunakan [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) bawaan.
 
 ```js
-// You can use any browser APIs, for example:
+// Anda dapat menggunakan browser API apa saja, sebagai contoh:
 myRef.current.scrollIntoView();
 ```
 
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### Contoh: Fokus ke sebuah input teks {/*example-focusing-a-text-input*/}
 
-In this example, clicking the button will focus the input:
+Pada contoh ini, meng-klik tombol tersebut akan fokus ke input:
 
 <Sandpack>
 
@@ -73,18 +73,18 @@ export default function Form() {
 
 </Sandpack>
 
-To implement this:
+Penerapannya:
 
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+1. Deklarasikan `inputRef` dengan `useRef` Hook.
+2. Oper sebagai `<input ref={inputRef}>`. React akan **meletakkan `<input>` DOM node ke dalam `inputRef.current`.**
+3. Pada fungsi `handleClick`, baca input DOM node dari `inputRef.current` dan panggil [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) menggunakan `inputRef.current.focus()`.
+4. Oper `handleClick` event handler ke `<button>` menggunakan `onClick`.
 
-While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. Read about refs in [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+Mesikpun manipulasi DOM merupakan hal yang sangat umum untuk *refs*, Hook `useRef` dapat digunakan untuk menyimpan hal-hal lain di luar React, seperti ID *timer*. Sama halnya dengan *state*, *refs* tetap sama di antara proses *render*. *Refs* sama seperti variabel *state* yang tidak memicu banyak *render* saat Anda mengaturnya. Baca tentang *refs* pada [Mereferensikan nilai dengan Refs.](/learn/referencing-values-with-refs)
 
-### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+### Example: Menggulir ke sebuah Elemen {/*example-scrolling-to-an-element*/}
 
-You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
+Anda dapat memiliki lebih dari satu *ref* dalam sebuah komponen. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
 
 <Sandpack>