From 98635cce9ff758ef44bb7e6da63572e05da57fca Mon Sep 17 00:00:00 2001 From: kafinsalim Date: Sun, 20 Oct 2019 16:09:30 +0700 Subject: [PATCH 1/7] translated to bahasa indonesia --- content/docs/reference-dom-elements.md | 48 ++++++++++++++++++-------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..16e4db6a6 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -15,56 +15,70 @@ redirect_from: --- React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React mengimplementasikan sistem DOM yang independen terhadap browser demi performa dan kompabilitas lintas browser. Kami mengambil kesempatan untuk membersihikan beberapa sisi kasar dalam implementasi browser DOM. In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +di React, semua properti dan atribut DOM (termasuk *event handlers*) harus menggunakan *camelCase*. Sebagai contoh, atribut HTML `tabindex` mengacu pada atribut `tabIndex` di React. Terdapat pengecualian untuk atribut `aria-*` dan `data-*`, yang mana menggunakan *lowercase*. Sebagai contoh, anda dapat membiarkan `aria-label` sebagai `aria-label`. ## Differences In Attributes {#differences-in-attributes} There are a number of attributes that work differently between React and HTML: +Terdapat beberapa atribut yang bekerja secara berbeda antara React dan HTML: ### checked {#checked} The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +Atribut `checked` didukung oleh komponen `` dengan tipe `checkbox` atau `radio`. Anda dapat menggunakannya untuk mengatur apakah komponen telah di cek. Hal ini bermanfaat untuk membuat komponen yang dikendalikan. `defaultChecked` adalah komponen yang tidak terkontrol, yang mana mengatur apakah komponen telah di cek ketika pertama kali dipasang. ### className {#classname} To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +untuk menentukan kelas CSS, gunakan atribut `className`. Hal ini berlaku untuk seluruh DOM reguler dan elemen SVG seperti `
`, ``, dan yang lainnya. If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Jika anda menggunakan React dengan Komponen Web (yang mana tidak lazim), sebagai gantinya gunakan atribut `class`. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} `dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` adalah pengganti `innerHTML` milik React pada browser DOM. Secara umum, pengaturan HTML melalui kode memiliki resiko karena secara tidak sengaja sangat mudah untuk membuka pengguna anda kepada serangan [scripting lintas-situs (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting). Sehingga, anda dapat mengatur HTML secara langsung dari React, tetapi jika anda harus mengetik `dangerouslySetInnerHTML` dan melewatkan sebuah objek dengan kunci `__html`, untuk mengingatkan anda sendiri bahwa hal ini berbahaya. Sebagai contoh: ```js -function createMarkup() { - return {__html: 'First · Second'}; +function buatMarkup() { + return {__html: 'Pertama · Kedua'}; } -function MyComponent() { - return
; +function KomponenSaya() { + return
; } ``` ### htmlFor {#htmlfor} Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Sejak `for` adalah kata yang sudah dipesan di JavaScript, elemen React menggunakan `htmlFor` sebagai gantinya. ### onChange {#onchange} The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +*event* `onChange` bertingkah sebagaimana yang anda harapkan: kapanpun kolom sebuah formulir, *event* ini dieksekusi. Kami secara sengaja tidak menggunakan tingkah laku browser yang ada karena `onChange` adalah penamaan yang salah untuk tingkah laku ini dan React bergantung kepada *event* ini untuk menangani masukan pengguna secara *real time*. ### selected {#selected} The `selected` attribute is supported by `
`, ``, and others. -untuk menentukan kelas CSS, gunakan atribut `className`. Hal ini berlaku untuk seluruh DOM reguler dan elemen SVG seperti `
`, ``, dan yang lainnya. +Untuk menentukan kelas CSS, gunakan atribut `className`. Hal ini berlaku untuk seluruh DOM reguler dan elemen SVG seperti `
`, ``, dan lainnya. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. Jika anda menggunakan React dengan Komponen Web (yang mana tidak lazim), sebagai gantinya gunakan atribut `class`. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: -`dangerouslySetInnerHTML` adalah pengganti `innerHTML` milik React pada browser DOM. Secara umum, pengaturan HTML melalui kode memiliki resiko karena secara tidak sengaja sangat mudah untuk membuka pengguna anda kepada serangan [scripting lintas-situs (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting). Sehingga, anda dapat mengatur HTML secara langsung dari React, tetapi jika anda harus mengetik `dangerouslySetInnerHTML` dan melewatkan sebuah objek dengan kunci `__html`, untuk mengingatkan anda sendiri bahwa hal ini berbahaya. Sebagai contoh: +`dangerouslySetInnerHTML` adalah pengganti `innerHTML` milik React pada browser DOM. Secara umum, pengaturan HTML melalui kode memiliki resiko karena secara tidak sengaja sangat mudah untuk membuka celah serangan [cross-site scripting (XSS)](https://id.wikipedia.org/wiki/XSS) kepada pengguna anda. Sehingga, anda dapat mengatur HTML secara langsung dari React, tetapi anda harus mengetik `dangerouslySetInnerHTML` dan memberikan sebuah objek dengan *key* `__html`, untuk mengingatkan anda sendiri bahwa hal ini berbahaya. Sebagai contoh: ```js function buatMarkup() { @@ -55,29 +48,22 @@ function KomponenSaya() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. -Sejak `for` adalah kata yang sudah dipesan di JavaScript, elemen React menggunakan `htmlFor` sebagai gantinya. +Karena `for` adalah kata khusus dalam JavaScript, elemen React menggunakan `htmlFor` sebagai gantinya. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. -*event* `onChange` bertingkah sebagaimana yang anda harapkan: kapanpun kolom sebuah formulir, *event* ini dieksekusi. Kami secara sengaja tidak menggunakan tingkah laku browser yang ada karena `onChange` adalah penamaan yang salah untuk tingkah laku ini dan React bergantung kepada *event* ini untuk menangani masukan pengguna secara *real time*. +*Event* `onChange` bertingkah sebagaimana yang anda harapkan: kapanpun kolom sebuah formulir, *event* ini dieksekusi. Kami secara sengaja tidak menggunakan tingkah laku browser yang ada karena `onChange` adalah penamaan yang salah untuk tingkah laku ini dan React bergantung kepada *event* ini untuk menangani masukan pengguna secara *real time*. ### selected {#selected} -The `selected` attribute is supported by `
``` -Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). -Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). +Tidak semua properti *style* dikonversi menjadi *string* pixel. Beberapa yang lain tetap tanpa unit (mis. `zoom`, `order`, `flex`). Daftar properti tanpa unit yang lengkap dapat dilihat [disini](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). ### suppressContentEditableWarning {#suppresscontenteditablewarning} -Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually. +Secara normal, ada sebuah peringatan ketika elemen dengan *children* juga ditandai sebagai `contentEditable`, karena ini tidak akan berfungsi. Atribut ini menyembunyikan peringatan tersebut. Jangan gunakan ini terkecuali jika anda membangun sebuah library seberti [Draft.js](https://facebook.github.io/draft-js/) yang mengatur `contentEditable` secara manual. ### suppressHydrationWarning {#suppresshydrationwarning} -If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client. +Jika Anda menggunakan *rendering* sisi server React, biasanya ada peringatan ketika server dan klien membuat konten yang berbeda. Namun, pada beberapa kasus yang jarang terjadi, sangat sulit atau tidak mungkin untuk menjamin kecocokan yang tepat. Sebagai contoh, *timestamps* diharapkan berbeda di server dan di klien. -If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate). +Jika anda mengatur `suppressHydrationWarning` ke `true`, React tidak akan memperingatkan Anda tentang ketidakcocokan dalam atribut dan konten elemen itu. Ini hanya bekerja sedalam satu tingkat, dan dimaksudkan untuk digunakan sebagai pintu keluar. Jangan terlalu sering menggunakannya. Anda dapat membaca lebih lanjut tentang hidrasi di [dokumentasi `ReactDOM.hydrate()`](/docs/react-dom.html#hydrate). ### value {#value} -The `value` attribute is supported by `` and `