You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/client/createRoot.md
+11-12Lines changed: 11 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -44,9 +44,8 @@ Aplikasi yang sepenuhnya dibuat dengan React biasanya cukup memanggil `createRoo
44
44
* `domNode`: Sebuah [elemen DOM.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React akan membuat induk untuk elemen DOM ini dan memungkinkan Anda untuk memanggil fungsi lain pada induk, seperti `render` untuk menampilkan konten React yang sudah dirender.
45
45
46
46
* **opsional** `options`: Sebuah objek dengan opsi-opsi berikut untuk induk React ini.
47
-
48
47
* **opsional** `onRecoverableError`: *Callback* yang dipanggil saat React berhasil pulih secara otomatis dari kesalahan.
49
-
* **opsional** `identifierPrefix`: sebuah string yang React gunakan untuk ID yang dibuat oleh [`useId`.](/reference/react/useId) Berguna untuk mencegah konflik saat menggunakan banyak induk pada halaman yang sama.
48
+
* **opsional** `identifierPrefix`: sebuah *string* yang React gunakan untuk ID yang dibuat oleh [`useId`.](/reference/react/useId) Berguna untuk mencegah konflik saat menggunakan banyak induk pada halaman yang sama.
50
49
51
50
#### Returns {/*returns*/}
52
51
@@ -101,7 +100,7 @@ Sebuah aplikasi yang dibuat sepenuhnya dengan React biasanya tidak perlu memangg
101
100
102
101
Fungsi ini biasanya berguna saat node DOM pada induk React (atau turunan lainnya) mungkin dapat terhapus dari DOM oleh kode lain. Sebagai contoh, bayangkan sebuah panel tab jQuery yang menghapus tab nonaktif dari DOM. Jika tab tersebut terhapus, seluruh isi dari DOM tersebut (termasuk induk React) juga akan ikut terhapus. Pada kasus ini, Anda perlu memberitahukan React untuk "stop" mengelola konten DOM induk yang terhapus dengan memanggil `root.unmount`. Jika tidak, komponen yang ada di dalam induk tersebut tidak tahu kalau mereka harus membersihkan dan membebaskan *resources* global seperti *subscriptions*.
103
102
104
-
Memanggil `root.unmount` akan meng-*unmount* seluruh komponen di dalam induk, dan "melepaskan" React dari dalam node DOM induk, termasuk menghapus *event handlers* dan *state* yang ada pada pohon.
103
+
Memanggil `root.unmount` akan mengunmount seluruh komponen di dalam induk, dan "melepaskan" React dari dalam node DOM induk, termasuk menghapus *event handlers* dan *state* yang ada pada pohon.
105
104
106
105
107
106
#### Parameters {/*root-unmount-parameters*/}
@@ -187,7 +186,7 @@ function Counter() {
187
186
188
187
**Jika aplikasi Anda dibuat sepenuhnya dengan React, Anda seharusnya tidak perlu membuat induk-induk lainnya, atau memanggil [`root.render`](#root-render) kembali.**
189
188
190
-
Kedepannya, React akan mengelola DOM tersebut untuk seluruh aplikasi Anda. Untuk menambahkan komponen-komponen lain, [pasangkan mereka di dalam komponen `App`.](/learn/importing-and-exporting-components) Saat Anda perlu memperbarui UI tersebut, Anda dapat melakukannya [dengan menggunakan *state*.](/reference/react/useState) Saat Anda ingin menampilkan konten ekstra seperti *modal* atau *tooltip* diluar dari node DOM, [reder komponen tersebut dengan sebuah portal.](/reference/react-dom/createPortal)
189
+
Kedepannya, React akan mengelola DOM tersebut untuk seluruh aplikasi Anda. Untuk menambahkan komponen-komponen lain, [pasangkan mereka di dalam komponen `App`.](/learn/importing-and-exporting-components) Saat Anda perlu memperbarui UI tersebut, Anda dapat melakukannya [dengan menggunakan *state*.](/reference/react/useState) Saat Anda ingin menampilkan konten ekstra seperti *modal* atau *tooltip* diluar dari node DOM, [render komponen tersebut dengan sebuah portal.](/reference/react-dom/createPortal)
191
190
192
191
<Note>
193
192
@@ -197,13 +196,13 @@ Saat HTML Anda kosong, pengguna akan melihat sebuah halaman kosong sampai kode J
197
196
<div id="root"></div>
198
197
```
199
198
200
-
Ini dapat terasa sangat lambat! Untuk mengatasi masalah ini, Anda dapat membuat HTML awal dari komponen Anda [pada server atau saat proses *build*](/reference/react-dom/server) Sehingga pengunjung dapat membaca teks, melihat gambar dan mengklik tautan sebelum kode JavaScript apapun selesai dimuat. Kami merekomendasikan untuk [menggunakan sebuah *frameworks*](/learn/start-a-new-react-project#production-grade-react-frameworks) yang telah melakukan optimisasi ini sejak awal. Bergantung dari kapan proses ini berjalan, ini dapat dipanggil sebagai *server-side rendering (SSR)* atau *static site generation (SSG).*
199
+
Ini dapat terasa sangat lambat! Untuk mengatasi masalah ini, Anda dapat membuat HTML awal dari komponen Anda [pada server atau saat proses *build*](/reference/react-dom/server) Sehingga pengunjung dapat membaca teks, melihat gambar dan mengklik tautan sebelum kode JavaScript apapun selesai dimuat. Kami merekomendasikan untuk [menggunakan sebuah *framework*](/learn/start-a-new-react-project#production-grade-react-frameworks) yang telah melakukan optimisasi ini sejak awal. Bergantung dari kapan proses ini berjalan, ini dapat dipanggil sebagai *server-side rendering (SSR)* atau *static site generation (SSG).*
201
200
202
201
</Note>
203
202
204
203
<Pitfall>
205
204
206
-
**Aplikasi yang dirender pada server atau pembuatan statis harus memanggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot), bukan `createRoot`.** React kemdudian akan *hydrate* (menggunakan ulang) node-node DOM dari HTML Anda, alih-alih menghancurkan dan membuat ulang node tersebut.
205
+
**Aplikasi yang dirender pada server atau pembuatan statis harus memanggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot), bukan `createRoot`.** React kemudian akan menghydrate (menggunakan ulang) node-node DOM dari HTML Anda, alih-alih menghancurkan dan membuat ulang node tersebut.
207
206
208
207
</Pitfall>
209
208
@@ -287,7 +286,7 @@ nav ul li { display: inline-block; margin-right: 20px; }
287
286
288
287
</Sandpack>
289
288
290
-
Anda dapt juga membuat node DOM baru dengan [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) dan menambahkannya ke dalam dokumen secara langsung.
289
+
Anda dapat juga membuat node DOM baru dengan [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) dan menambahkannya ke dalam dokumen secara langsung.
291
290
292
291
```js
293
292
const domNode = document.createElement('div');
@@ -296,7 +295,7 @@ root.render(<Comment />);
296
295
document.body.appendChild(domNode); // Anda dapat menambahkan kode ini di manapun dalam dokumen
297
296
```
298
297
299
-
Untuk memusnahkan pohon React dari node DOM dan membersihka semua*resources* yang digunakan, panggil [`root.unmount`.](#root-unmount)
298
+
Untuk memusnahkan pohon React dari node DOM dan membersihkan seluruh*resources* yang digunakan, panggil [`root.unmount`.](#root-unmount)
300
299
301
300
```js
302
301
root.unmount();
@@ -306,7 +305,7 @@ Hal ini biasanya berguna saat komponen React Anda berada dalam aplikasi yang men
Anda dapat memanggil `render` lebih dari sekali untuk induk yang sama. Selama pohon komponen tersebut sama dengan yang sebelumnya telah dirender, React akan [menjaga statenya.](/learn/preserving-and-resetting-state) Perhatikan bagaimana Anda dapat mengetik pada *input*, yang berarti pembaruan dari pemanggilan `render` yang berulang setiap detik pada contoh ini tidak desktruktif.
312
311
@@ -359,7 +358,7 @@ root.render(<App />);
359
358
Tidak akan ada yang tampil sampai hal tersebut Anda lakukan.
360
359
361
360
---
362
-
### Saya Mendapatkan Pesan Kesalanan:"*Target container is not a DOM element*" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
361
+
### Saya Mendapatkan Pesan Kesalahan:"*Target container is not a DOM element*" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
363
362
364
363
Pesan kesalahan ini menyatakan apapun yang Anda berikan ke `createRoot` bukan sebuah node DOM.
365
364
@@ -409,7 +408,7 @@ root.render(createApp());
409
408
410
409
### HTML yang Dirender oleh Server Selalu Dibuat Ulang dari Awal {/*my-server-rendered-html-gets-re-created-from-scratch*/}
411
410
412
-
Jika aplikasi Anda adalah aplikasi yang dirender oleh server dan menggunakan HTML awal yang dibuat oleh React, Anda mungkin akan menyadari bahwa dengan membuat induk dan memanggil `root.render` menghapus seluruh HTML tersebut dan membuat ulag node-node DOM dari awal. Hal ini dapat memperlamat, mereset fokus dan posisi *scroll*, dan mungkin menghilangkan *input* dari pengguna.
411
+
Jika aplikasi Anda adalah aplikasi yang dirender oleh server dan menggunakan HTML awal yang dibuat oleh React, Anda mungkin akan menyadari bahwa dengan membuat induk dan memanggil `root.render` menghapus seluruh HTML tersebut dan membuat ulang node-node DOM dari awal. Hal ini dapat memperlambat, mereset fokus dan posisi *scroll*, dan mungkin menghilangkan *input* dari pengguna.
413
412
414
413
Aplikasi yang dirender oleh server harus menggunakan [`hydrateRoot`](/reference/react-dom/client/hydrateRoot), bukan `createRoot`:
415
414
@@ -423,4 +422,4 @@ hydrateRoot(
423
422
);
424
423
```
425
424
426
-
Mohon dicatat bahwa APInya berbeda. Khususnya, biasanya tidak akan ada lagi panggilan `root.render`.
425
+
Mohon dicatat bahwa APInya berbeda. Lebih spesifiknya, biasanya tidak akan ada lagi panggilan `root.render`.
0 commit comments