Skip to content

Commit

Permalink
Translate DOM Elements (#120)
Browse files Browse the repository at this point in the history 
* translated to bahasa indonesia

* update

* update typo and translation improvement

* update translation

* update title

* update transtion ✍️ ✌️

* update translation ✍️ ✌️
  • Loading branch information
@kfnx @resir014
kfnx authored and resir014 committed Nov 13, 2019
1 parent 5185383 commit 4e10ffb
Showing 1 changed file with 42 additions and 42 deletions.
84 changes: 42 additions & 42 deletions content/docs/reference-dom-elements.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: dom-elements
title: DOM Elements
title: Elemen-elemen DOM
layout: docs
category: Reference
permalink: docs/dom-elements.html
Expand All @@ -14,31 +14,31 @@ redirect_from:
- "tips/dangerously-set-inner-html.html"
---

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 peramban demi performa dan kompatibilitas lintas peramban. Kami mengambil kesempatan untuk membersihkan beberapa sisi kasar dalam implementasi DOM peramban.

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}
## Perbedaan Atribut {#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 `<input>` 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 `<input>` dengan tipe `checkbox` atau `radio`. Anda dapat menggunakannya untuk mengatur apakah komponen telah dicek. Hal ini bermanfaat untuk membangun komponen yang dikendalikan. `defaultChecked` adalah padanan yang tidak terkontrol, yang menetapkan apakah komponen telah dicek 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 `<div>`, `<a>`, and others.
Untuk menentukan kelas CSS, gunakan atribut `className`. Hal ini berlaku untuk seluruh DOM reguler dan elemen SVG seperti `<div>`, `<a>`, 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 DOM peramban. 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 createMarkup() {
return {__html: 'First &middot; Second'};
return {__html: 'Pertama &middot; Kedua'};
}

function MyComponent() {
Expand All @@ -48,23 +48,23 @@ function MyComponent() {

### htmlFor {#htmlfor}

Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.
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 diubah/berubah, *event* ini dieksekusi. Kami secara sengaja tidak menggunakan tingkah laku peramban 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 `<option>` components. You can use it to set whether the component is selected. This is useful for building controlled components.
Atribut `selected` didukung oleh komponen `<option>`. Anda dapat menggunakannya untuk mengatur apakah komponen ini telah dipilih. Hal ini bermanfaat untuk membangun komponen yang dapat diatur.

### style {#style}

>Note
>Catatan
>
>Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
>Beberapa contoh dalam dokumentasi ini menggunakan `style` untuk kenyamanan, tetapi **menggunakan atribut `style` sebagai sarana utama *styling* elemen secara umum sangat tidak disarankan.** Pada kebanyakan kasus, [`className`](#classname) harus digunakan untuk untuk merujuk kelas yang ditentukan pada *stylesheet* CSS eksternal. `style` paling sering digunakan pada aplikasi React untuk menambahkan *style* yang dikomputasi secara dinamis ketika waktu render. Lihat juga [FAQ: Styling dan CSS](/docs/faq-styling.html).
The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
Atribut `style` menerima objek JavaScript dengan properti *camelCase* dibanding sebuah *string* CSS. Hal ini konsisten dengan properti javascript DOM `style`, ini lebih efisien, dan menghindari celah security XSS. Sebagai contoh:

```js
const divStyle = {
Expand All @@ -73,70 +73,70 @@ const divStyle = {
};

function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
return <div style={divStyle}>Halo Dunia!</div>;
}
```

Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
Perhatikan bahwa *style* tidak diperbaiki secara otomatis. Untuk mendukung peramban lama, Anda perlu menyediakan properti *style* yang sesuai:

```js
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
WebkitTransition: 'all', // perhatikan 'W' kapital disini
msTransition: 'all' // 'ms' adalah satu-satunya vendor dengan awalan huruf kecil
};

function ComponentWithTransition() {
return <div style={divStyle}>This should work cross-browser</div>;
return <div style={divStyle}>Ini harusnya berfungsi lintas peramban</div>;
}
```

Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
*Style keys* diberi *camelCase* agar konsisten dengan mengakses properti pada *node* DOM dari JS (mis. `node.style.backgroundImage`). Awalan vendor [selain `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/) harus dimulai dengan huruf kapital. inilah mengapa `WebkitTransition` memiliki awalan "W".

React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
React secara otomatis akan menambahkan akhiran "px" ke properti *style* *inline* numerik tertentu. Jika Anda ingin menggunakan satuan selain "px", tentukan nilainya sebagai *string* dengan satuan yang diinginkan. Sebagai contoh:

```js
// Result style: '10px'
// Hasil *style*: '10px'
<div style={{ height: 10 }}>
Hello World!
Halo Dunia!
</div>

// Result style: '10%'
// Hasil *style*: '10%'
<div style={{ height: '10%' }}>
Hello World!
Halo Dunia!
</div>
```

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 `<input>` and `<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue` is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
Atribut `value` didukung oleh komponen `<input>` dan `<textarea>`. Anda dapat menggunakannya untuk mengatur nilai komponen. Ini berguna untuk membangun komponen yang dikendalikan. `defaultValue` adalah komponen yang tidak terkontrol, yang menetapkan nilai komponen saat pertama kali dipasang.

## All Supported HTML Attributes {#all-supported-html-attributes}
## Semua Atribut HTML yang Didukung {#all-supported-html-attributes}

As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
Pada React 16, semua atribut DOM standar [atau *custom*](/blog/2017/09/08/dom-attributes-in-react-16.html) sepenuhnya didukung.

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
React selalu menyediakan API JavaScript-sentris untuk DOM. Karena komponen React seringkali mengambil *props* khusus dan *props* yang terkait dengan DOM, React menggunakan konvensi `camelCase` seperti halnya DOM API:

```js
<div tabIndex="-1" /> // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} /> // Just like node.readOnly DOM API
<div tabIndex="-1" /> // Sama seperti API DOM node.tabIndex
<div className="Button" /> // Sama seperti API DOM node.className
<input readOnly={true} /> // Sama seperti API DOM node.readOnly
```

These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
*Props* ini bekerja mirip dengan atribut HTML yang sesuai, dengan pengecualian pada kasus khusus yang didokumentasikan di atas.

Some of the DOM attributes supported by React include:
Beberapa atribut DOM yang didukung oleh React meliputi:

```
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
Expand All @@ -154,7 +154,7 @@ sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
```

Similarly, all SVG attributes are fully supported:
Demikian pula, semua atribut SVG didukung sepenuhnya:

```
accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
Expand Down Expand Up @@ -193,4 +193,4 @@ xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
```

You may also use custom attributes as long as they're fully lowercase.
Anda juga dapat menggunakan atribut khusus selama hanya menggunakan huruf kecil.

0 comments on commit 4e10ffb

Please sign in to comment.