Skip to content

ReactDOM Translation #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 14, 2019
64 changes: 32 additions & 32 deletions content/docs/reference-react-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,53 @@ category: Reference
permalink: docs/react-dom.html
---

If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
Jika Anda memuat React dari sebuah `<script>` *tag*, API-API tingkat atas ini terdapat di `ReactDOM` *global*. Jika Anda menggunakan ES6 dengan npm, Anda dapat mengetik `import ReactDOM from 'react-dom'`. Jika Anda menggunakan ES5 dengan npm, Anda dapat mengetik `var ReactDOM = require('react-dom')`.

## Overview {#overview}
## Ikhtisar {#overview}

The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
Paket `react-dom` menyediakan metode-metode spesifik DOM yang dapat digunakan di tingkat atas aplikasi Anda, juga sebagai jalan untuk keluar dari React *model* jika diperlukan. Pada umumnya komponen-komponen Anda tidak memerlukan modul ini.

- [`render()`](#render)
- [`hydrate()`](#hydrate)
- [`unmountComponentAtNode()`](#unmountcomponentatnode)
- [`findDOMNode()`](#finddomnode)
- [`createPortal()`](#createportal)

### Browser Support {#browser-support}
### Dukungan Browser {#browser-support}

React supports all popular browsers, including Internet Explorer 9 and above, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older browsers such as IE 9 and IE 10.
React mendukung semua browser populer, termasuk Internet Explorer 9 dan setelahnya, meskipun [memerlukan beberapa *polyfills*](/docs/javascript-environment-requirements.html) untuk browser-browser kuno seperti IE 9 dan IE 10.

> Note
> Catatan
>
> We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.
> Kami tidak mendukung browser-browser kuno yang tidak mendukung metode-metode ES5, tapi Anda mungkin menemukan bahwa aplikasi-aplikasi Anda ternyata dapat berjalan di browser-browser kuno jika *polyfills* seperti [es5-shim dan es5-sham](https://github.com/es-shims/es5-shim) disertakan di halaman web. Kami tidak dapat membantu Anda jika Anda melakukan ini.

* * *

## Reference {#reference}
## Referensi {#reference}

### `render()` {#render}

```javascript
ReactDOM.render(element, container[, callback])
```

Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#functional-and-class-components)).
Me-*render* sebuah elemen React ke dalam DOM di dalam `container` yang diberikan dan mengembalikan sebuah [referensi](/docs/more-about-refs.html) kepada komponen (atau memulangkan `null` untuk [stateless components](/docs/components-and-props.html#functional-and-class-components)).

If the React element was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
Jika elemen React tersebut sebelumnya di-*render* ke dalam `container`, ini akan memperbaruinya dan hanya mengubah DOM seperlunya untuk memperlihatkan elemen React terbaru.

If the optional callback is provided, it will be executed after the component is rendered or updated.
Jika *callback* fakultatif diberikan, *callback* ini akan dijalankan setelah komponen di-*render* atau diperbarui.

> Note:
> Catatan:
>
> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
> `ReactDOM.render()` mengendalikan isi dari *container node* yang Anda berikan. Semua elemen-elemen DOM yang ada di dalam diganti pada saat dipanggil pertama kali. Panggilan-panggilan berikutnya menggunakan algoritma pembeda DOM dari React untuk pembaruan yang efisien.
>
> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
> `ReactDOM.render()` tidak memodifikasi *container node* (hanya memodifikasi anak-anak dari *container*). Hal tersebut memungkinkan kita untuk memasukkan sebuah komponen ke dalam sebuah *DOM node* yang ada tanpa menimpa anak-anaknya.
>
> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
> and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) to the root element.
> `ReactDOM.render()` pada saat ini mengembalikan sebuah referensi ke *root* `ReactComponent` *instance*. Tetapi, menggunakan hasil fungsi ini adalah kuno
> dan harus dihindari karena React versi-versi berikutnya mungkin akan me-*render* komponen-komponen secara *asynchronous* dalam beberapa situasi tertentu. Jika Anda memerlukan referensi ke *root* `ReactComponent` *instance*, solusi yang disarankan adalah dengan melampirkan sebuah
> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) ke elemen dasar.
>
> Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated and will be removed in React 17. Use [`hydrate()`](#hydrate) instead.
> Menggunakan `ReactDOM.render()` untuk mengisi sebuah *container* yang di-*render* *server* dianggap usang dan akan tidak berlaku di React 17. Sebaiknya gunakan [`hydrate()`](#hydrate).

* * *

Expand All @@ -62,15 +62,15 @@ If the optional callback is provided, it will be executed after the component is
ReactDOM.hydrate(element, container[, callback])
```

Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
Sama seperti [`render()`](#render), tapi digunakan untuk meng-*hidrasi* sebuah *container* yang isi HTML-nya di-*render* oleh [`ReactDOMServer`](/docs/react-dom-server.html). React akan mencoba untuk melampirkan *event listeners* ke *markup* yang ada.

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
React mengharapkan bahwa isi yang di-*render* adalah sama antara *server* dan klien. React dapat memperbaiki perbedaan dalam isi teks, tetapi Anda harus menganggap ketidakcocokan sebagai kesalahan dan memperbaikinya. Dalam mode *development*, React memperingatkan tentang ketidakcocokan pada saat *hidrasi*. Tidak ada jaminan bahwa perbedaan atribut akan diperbaiki jika terjadi ketidakcocokan. Ini penting untuk alasan-alasan kinerja karena dalam aplikasi-aplikasi pada umumnya, ketidakcocokan adalah jarang, dan memeriksa semua *markup* akan amat sangat berat.

If a single element's attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the warning by adding `suppressHydrationWarning={true}` to the element. It only works one level deep, and is intended to be an escape hatch. Don't overuse it. Unless it's text content, React still won't attempt to patch it up, so it may remain inconsistent until future updates.
Jika atribut dari sebuah elemen atau isi text berbeda antara *server* dan klien (contohnya, sebuah *timestamp*), Anda dapat membungkam *warning* dengan menambahkan `suppressHydrationWarning={true}` di elemen tersebut. Ini hanya dapat dilakukan pada kedalaman satu tingkat, dan dimaksudkan sebagai jalan keluar. Jangan disalahgunakan. Kecuali isi teksnya, React tidak akan mencoba untuk memperbaiki hal ini, jadi ini mungkin akan tetap tidak konsekuen sampai diperbarui di masa depan.

If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like `this.state.isClient`, which you can set to `true` in `componentDidMount()`. This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.
Jika Anda sengaja perlu untuk me-*render* sesuatu yang berbeda antara *server* dan klien, Anda dapat melakukan *two-pass rendering*. Komponen-komponen yang me-*render* sesuatu yang berbeda di klien dapat membaca sebuah *state variable* seperti `this.state.isClient`, dimana Anda dapat menetapkannya menjadi `true` di `componentDidMount()`. Dengan cara ini *render pass* pertama akan me-*render* isi yang sama dengan *server*, menghindari ketidakcocokan, tetapi sebuah *pass* tambahan akan terjadi secara sinkron langsung setelah *hidrasi*. Perhatikan bahwa cara ini akan mengakibatkan komponen-komponen Anda lebih lambat karena mereka harus me-*render* dua kali, jadi gunakan dengan hati-hati.

Remember to be mindful of user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so if you render something different in the client-only pass, the transition can be jarring. However, if executed well, it may be beneficial to render a "shell" of the application on the server, and only show some of the extra widgets on the client. To learn how to do this without getting the markup mismatch issues, refer to the explanation in the previous paragraph.
Ingat untuk berhati-hati dalam hal *user experience* pada saat koneksi lambat. Kode JavaScript mungkin akan dimuat lebih lama dari *render* HTML pertama, jadi jika Anda me-*render* sesuatu yang beda di *client-only pass*, transisinya bisa kasar. Meskipun begitu, jika dijalankan dengan baik, mungkin menguntungkan jika me-*render* cangkang dari aplikasi di *server*, dan hanya memperlihatkan beberapa *widget* ekstra di klien. Untuk belajar bagaimana melakikan ini tanpa mengalami masalah ketidakcocokan *markup*, lihat penjelasan di paragraf sebelumnya.

* * *

Expand All @@ -80,28 +80,28 @@ Remember to be mindful of user experience on slow connections. The JavaScript co
ReactDOM.unmountComponentAtNode(container)
```

Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
Membuang sebuah komponen React terpasang dari DOM dan membersihkan *event handlers* dan *state* terkait. Jika tidak terdapat komponen yang terpasang di dalam *container*, memanggil *function* ini tidak melakukan apa-apa. Memulangkan `true` jika sebuah komponen dicabut dan `false` jika tidak ada komponen yang dicabut.

* * *

### `findDOMNode()` {#finddomnode}

> Note:
> Catatan:
>
> `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
> `findDOMNode` adalah sebuah cara yang digunakan untuk mengakses *DOM node* pokok. Pada umumnya, penggunaan cara ini tidak disarankan sebab menembus abstraksi komponen. [Sudah tidak berlaku dalam `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)

```javascript
ReactDOM.findDOMNode(component)
```
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.**
Jika komponen ini telah dipasang ke dalam DOM, memulangkan elemen DOM asli browser yang terkait. Metode ini berguna untuk membaca nilai keluar dari DOM, seperti nilai-nilai form field dan melakukan pengukuran DOM. **Pada umumnya, Anda dapat melampirkan sebuah referensi ke *DOM node* dan menghindari penggunaan `findDOMNode` sepenuhnya.**

When a component renders to `null` or `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value. As of React 16, a component may return a fragment with multiple children, in which case `findDOMNode` will return the DOM node corresponding to the first non-empty child.
Ketika sebuah komponen me-*render* menjadi `null` atau `false`, `findDOMNode` memulangkan `null`. Ketika sebuah komponen me-*render* menjadi sebuah teks, `findDOMNode` memulangkan sebuah *DOM node* teks dengan nilai tersebut sebagai isi. Dimulai dari React 16, sebuah komponen dapat memulangkan sebuah fragmen dengan banyak anak, dimana `findDOMNode` akan memulangkan *DOM node* yang sesuai dengan anak pertama yang tidak kosong.

> Note:
> Catatan:
>
> `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
> `findDOMNode` hanya dapat digunakan pada komponen-komponen terpasang (adalah, komponen-komponen yang telah ditempatkan di dalam DOM). Jika Anda mencoba memanggil ini pada sebuah komponen yang belum terpasang (seperti memanggil `findDOMNode()` di dalam `render()` pada sebuah komponen yang belum diciptakan) sebuah *exception* akan diperlihatkan.
>
> `findDOMNode` cannot be used on function components.
> `findDOMNode` tidak dapat digunakan pada komponen-komponen *function*.

* * *

Expand All @@ -111,4 +111,4 @@ When a component renders to `null` or `false`, `findDOMNode` returns `null`. Whe
ReactDOM.createPortal(child, container)
```

Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
Membuat sebuah *portal*. *Portal* memberikan cara untuk [me-*render* anak-anak ke dalam sebuah *DOM node* yang berada diluar hirarki dari komponen DOM](/docs/portals.html).