|
1 | 1 | ---
|
2 | 2 | id: rendering-elements
|
3 |
| -title: Rendering Elements |
| 3 | +title: Me-render Elemen |
4 | 4 | permalink: docs/rendering-elements.html
|
5 | 5 | redirect_from:
|
6 | 6 | - "docs/displaying-data.html"
|
7 | 7 | prev: introducing-jsx.html
|
8 | 8 | next: components-and-props.html
|
9 | 9 | ---
|
10 | 10 |
|
11 |
| -Elements are the smallest building blocks of React apps. |
| 11 | +Elemen adalah blok terkecil pada aplikasi React. |
12 | 12 |
|
13 |
| -An element describes what you want to see on the screen: |
| 13 | +Sebuah elemen menggambarkan apa yang ingin Anda lihat pada layar: |
14 | 14 |
|
15 | 15 | ```js
|
16 |
| -const element = <h1>Hello, world</h1>; |
| 16 | +const element = <h1>Halo dunia</h1>; |
17 | 17 | ```
|
18 | 18 |
|
19 |
| -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. |
| 19 | +Tidak seperti elemen DOM, elemen React merupakan objek biasa, dan mudah dibuat. React DOM mangatur pembaruan DOM agar sesuai dengan elemen React. |
20 | 20 |
|
21 |
| ->**Note:** |
| 21 | +>**Catatan:** |
22 | 22 | >
|
23 |
| ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. |
| 23 | +>Mungkin akan sedikit bingung antara elemen dengan konsep yang lebih dikenali yaitu "komponen". Kami akan memperkenalkan komponen di [bagian berikutnya](/docs/components-and-props.html). Elemen adalah apa yang "membuat" komponen dan kami menyarankan Anda untuk membaca bagian ini sebelum melompat ke bagian berikutnya. |
24 | 24 |
|
25 |
| -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} |
| 25 | +## Me-render elemen ke dalam DOM {#rendering-an-element-into-the-dom} |
26 | 26 |
|
27 |
| -Let's say there is a `<div>` somewhere in your HTML file: |
| 27 | +Sebagai contoh terdapat sebuah `<div>` di suatu tempat di *file* HTML Anda: |
28 | 28 |
|
29 | 29 | ```html
|
30 | 30 | <div id="root"></div>
|
31 | 31 | ```
|
32 | 32 |
|
33 |
| -We call this a "root" DOM node because everything inside it will be managed by React DOM. |
| 33 | +Kita menyebut ini sebagai *node DOM* "akar" karena semua yang berada di dalamnya nanti akan diatur oleh React DOM. |
34 | 34 |
|
35 |
| -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. |
| 35 | +Aplikasi yang dibuat dengan React biasanya memiliki satu *node DOM* akar. Jika anda mengintegrasikan React ke dalam aplikasi yang sudah ada, Anda dapat memiliki *node DOM* akar yang terisolasi sebanyak yang Anda inginkan. |
36 | 36 |
|
37 |
| -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: |
| 37 | +Untuk me-*render* sebuah elemen React ke dalam sebuah *node DOM* akar, oper keduanya ke `ReactDOM.render()`: |
38 | 38 |
|
39 | 39 | `embed:rendering-elements/render-an-element.js`
|
40 | 40 |
|
41 |
| -[](codepen://rendering-elements/render-an-element) |
| 41 | +[Coba di CodePen](codepen://rendering-elements/render-an-element) |
42 | 42 |
|
43 |
| -It displays "Hello, world" on the page. |
| 43 | +Kode di atas akan menampilkan "Halo dunia" pada laman. |
44 | 44 |
|
45 |
| -## Updating the Rendered Element {#updating-the-rendered-element} |
| 45 | +## Memperbarui Elemen yang Telah Di-render {#updating-the-rendered-element} |
46 | 46 |
|
47 |
| -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. |
| 47 | +Elemen React bersifat [*immutable*](https://en.wikipedia.org/wiki/Immutable_object). Setelah Anda membuat sebuah elemen, Anda tidak dapat mengubah elemen anak atau atributnya. Sebuah elemen mirip dengan sebuah *frame* dalam film: elemen merepresentasikan antarmuka pengguna pada satu titik waktu tertentu. |
48 | 48 |
|
49 |
| -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. |
| 49 | +Dengan pengetahuan kita sejauh ini, satu-satunya jalan untuk memperbarui antarmuka pengguna adalah dengan membuat sebuah elemen baru dan mengopernya ke `ReactDOM.render()`. |
50 | 50 |
|
51 |
| -Consider this ticking clock example: |
| 51 | +Perhatikan contoh jam berdetak di bawah: |
52 | 52 |
|
53 | 53 | `embed:rendering-elements/update-rendered-element.js`
|
54 | 54 |
|
55 |
| -[](codepen://rendering-elements/update-rendered-element) |
| 55 | +[Coba di CodePen](codepen://rendering-elements/update-rendered-element) |
56 | 56 |
|
57 |
| -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. |
| 57 | +Contoh di atas memanggil `ReactDOM.render()` setiap detiknya dari sebuah *callback* [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). |
58 | 58 |
|
59 |
| ->**Note:** |
| 59 | +>**Catatan:** |
60 | 60 | >
|
61 |
| ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). |
| 61 | +>Dalam praktiknya, sebagian besar aplikasi React hanya memanggil `ReactDOM.render()` sekali saja. Pada bagian berikutnya kita akan mempelajari bagaimana kode ini dapat dienkapsulasi ke dalam [*stateful components*](/docs/state-and-lifecycle.html). |
62 | 62 | >
|
63 |
| ->We recommend that you don't skip topics because they build on each other. |
| 63 | +>Kami menyarankan agar Anda tidak melewati satu topik karena topik-topik ini berhubungan satu dengan lainnya. |
64 | 64 |
|
65 |
| -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} |
| 65 | +## React Hanya Memperbarui Apa yang Diperlukan {#react-only-updates-whats-necessary} |
66 | 66 |
|
67 |
| -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. |
| 67 | +React DOM membandingkan antara elemen dan elemen anaknya dengan elemen sebelumnya dan hanya mengaplikasikan perbaruan DOM yang diperlukan untuk menyelaraskan DOM ke *state* yang diinginkan. |
68 | 68 |
|
69 |
| -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: |
| 69 | +Anda dapat memverifikasi hal ini dengan menginspeksi [contoh terakhir](codepen://rendering-elements/update-rendered-element) dengan peralatan dari *browser*: |
70 | 70 |
|
71 |
| - |
| 71 | + |
72 | 72 |
|
73 |
| -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. |
| 73 | +Walaupun kita membuat sebuah elemen yang mendeskripsikan struktur antarmuka pengguna secara keseluruhan dalam setiap detiknya, hanya *node* teks yang kontennya mengalami perubahanlah yang akan diperbarui oleh React DOM. |
74 | 74 |
|
75 |
| -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. |
| 75 | +Menurut pengalaman kami, dengan hanya memikirkan tentang bagaimana antarmuka pengguna seharusnya terlihat pada saat tertentu daripada bagaimana ia berubah seiring waktu akan dapat mengeliminasi banyak *bug*. |
0 commit comments