Skip to content

Commit 6e672b1

Browse files
committed
docs: Typo fixes for react-dom/clientcreateRoot
1 parent ee9088c commit 6e672b1

File tree

1 file changed

+11
-12
lines changed

1 file changed

+11
-12
lines changed

src/content/reference/react-dom/client/createRoot.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ Aplikasi yang sepenuhnya dibuat dengan React biasanya cukup memanggil `createRoo
4444
* `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.
4545
4646
* **opsional** `options`: Sebuah objek dengan opsi-opsi berikut untuk induk React ini.
47-
4847
* **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.
5049
5150
#### Returns {/*returns*/}
5251
@@ -101,7 +100,7 @@ Sebuah aplikasi yang dibuat sepenuhnya dengan React biasanya tidak perlu memangg
101100
102101
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*.
103102
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.
105104
106105
107106
#### Parameters {/*root-unmount-parameters*/}
@@ -187,7 +186,7 @@ function Counter() {
187186

188187
**Jika aplikasi Anda dibuat sepenuhnya dengan React, Anda seharusnya tidak perlu membuat induk-induk lainnya, atau memanggil [`root.render`](#root-render) kembali.**
189188

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)
191190

192191
<Note>
193192

@@ -197,13 +196,13 @@ Saat HTML Anda kosong, pengguna akan melihat sebuah halaman kosong sampai kode J
197196
<div id="root"></div>
198197
```
199198

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).*
201200

202201
</Note>
203202

204203
<Pitfall>
205204

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.
207206

208207
</Pitfall>
209208

@@ -287,7 +286,7 @@ nav ul li { display: inline-block; margin-right: 20px; }
287286

288287
</Sandpack>
289288

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.
291290

292291
```js
293292
const domNode = document.createElement('div');
@@ -296,7 +295,7 @@ root.render(<Comment />);
296295
document.body.appendChild(domNode); // Anda dapat menambahkan kode ini di manapun dalam dokumen
297296
```
298297

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)
300299

301300
```js
302301
root.unmount();
@@ -306,7 +305,7 @@ Hal ini biasanya berguna saat komponen React Anda berada dalam aplikasi yang men
306305

307306
---
308307

309-
### Memperbahrui Komponen Induk {/*updating-a-root-component*/}
308+
### Memperbarui Komponen Induk {/*updating-a-root-component*/}
310309

311310
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.
312311

@@ -359,7 +358,7 @@ root.render(<App />);
359358
Tidak akan ada yang tampil sampai hal tersebut Anda lakukan.
360359

361360
---
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*/}
363362

364363
Pesan kesalahan ini menyatakan apapun yang Anda berikan ke `createRoot` bukan sebuah node DOM.
365364

@@ -409,7 +408,7 @@ root.render(createApp());
409408
410409
### HTML yang Dirender oleh Server Selalu Dibuat Ulang dari Awal {/*my-server-rendered-html-gets-re-created-from-scratch*/}
411410
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.
413412
414413
Aplikasi yang dirender oleh server harus menggunakan [`hydrateRoot`](/reference/react-dom/client/hydrateRoot), bukan `createRoot`:
415414
@@ -423,4 +422,4 @@ hydrateRoot(
423422
);
424423
```
425424
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

Comments
 (0)