Skip to content

Commit f77e817

Browse files
committed
docs: resolve conflicts in react-dom APIs
1 parent 4d144c1 commit f77e817

File tree

20 files changed

+79
-1364
lines changed

20 files changed

+79
-1364
lines changed

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

Lines changed: 11 additions & 498 deletions
Large diffs are not rendered by default.

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

Lines changed: 16 additions & 538 deletions
Large diffs are not rendered by default.

src/content/reference/react-dom/components/common.md

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -247,30 +247,6 @@ Berikut *events* yang aktif pada beberapa sumber daya seperti [`<audio>`](https:
247247
Alih-alih menggunakan sebuah objek ref (seperti yang dikembalikan oleh [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), anda dapat mengoper sebuah fungsi ke atribut `ref`.
248248

249249
```js
250-
<<<<<<< HEAD
251-
<div ref={(node) => console.log(node)} />
252-
```
253-
254-
[Lihat contoh dari penggunaan dari *callback* `ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
255-
256-
Saat *node* DOM `<div>` ditambahkan pada layar, React akan memanggil *callbak* dari `ref` beserta dengan `node` DOM sebagai sebuah argumen. Saat *node* DOM `<div>` tersebut dihapus, React akan memanggil *callback* `ref` dengan `null`
257-
258-
React juga akan memanggi *callback* `ref` setiap kali anda mengoper sebuah *callback* `ref` yang berbeda. Pada contoh di atas, `(node) => { ... }` adalah fungsi yang berbeda pada setiap *render*. Saat komponen anda mengalami *render* ulang, fungsi sebelumnya akan dipanggil dengan `null` sebagai argumennya, dan fungsi selanjutnya akan dipanggi dengan *node* DOM.
259-
260-
#### Parameter {/*ref-callback-parameters*/}
261-
262-
* `node`: Sebuah *node* DOM atau `null`. React akan mengoper kepada anda *node* DOM saat ref terpasang, dan `null` saat ref dilepas. Kecuali, jika anda mengoper referensi fungsi yang sama untuk *callback* `ref` pada setiap *render*, *callback* tersebut akan secara sementara dilepaskan dan dipasang kembali pada setiap *render* ulang dari komponen tersebut.
263-
264-
<Canary>
265-
266-
#### Kembalian {/*returns*/}
267-
268-
* **opsional** fungsi `cleanup`: Ketika `ref` dilepas, React akan memanggil fungsi `cleanup`. Jika fungsi tidak dikembalikan oleh *callback* `ref`, React akan memanggil ulang *callback* dengan `null` sebagai argumen ketika `ref` dilepas.
269-
270-
```js
271-
272-
=======
273-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
274250
<div ref={(node) => {
275251
console.log('Attached', node);
276252

@@ -280,41 +256,32 @@ React juga akan memanggi *callback* `ref` setiap kali anda mengoper sebuah *call
280256
}}>
281257
```
282258

283-
<<<<<<< HEAD
284-
#### Catatan Penting {/*caveats*/}
285-
286-
* Ketika mode Strict diaktifkan, React akan **menjalankan satu siklus *setup+cleanup* khusus pengembangan tambahan** sebelum penyiapan sebenarnya yang pertama. Ini adalah *stress-test* yang memastikan bahwa logika pembersihan Anda "mencerminkan" logika pengaturan Anda dan menghentikan atau membatalkan apa pun yang sedang dilakukan pengaturan. Jika ini menyebabkan masalah, implementasikan fungsi pembersihan.
287-
* Ketika Anda mengoper *callback* `ref` *yang berbeda*, React akan memanggil fungsi pembersihan *callback* *sebelumnya* jika disediakan. Jika fungsi pembersihan tidak ditentukan, callback `ref` akan dipanggil dengan `null` sebagai argumennya. Fungsi *next* akan dipanggil dengan simpul DOM.
288-
289-
</Canary>
290-
=======
291-
[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
259+
[Lihat contoh penggunaan *callback* `ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
292260

293-
When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback.
261+
Ketika simpul DOM `<div>` ditambahkan ke layar, React akan memanggil *callback* `ref` Anda dengan DOM `node` sebagai argumen. Ketika simpul DOM `<div>` tersebut dihapus, React akan memanggil fungsi pembersihan yang dikembalikan dari *callback*.
294262

295-
React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
263+
React juga akan memanggil *callback* `ref` Anda setiap kali Anda meneruskan *callback* `ref` yang *berbeda*. Dalam contoh di atas, `(node) => { ... }` adalah fungsi yang berbeda pada setiap render. Ketika komponen Anda dirender ulang, fungsi *sebelumnya* akan dipanggil dengan `null` sebagai argumen, dan fungsi *berikutnya* akan dipanggil dengan simpul DOM.
296264

297-
#### Parameters {/*ref-callback-parameters*/}
265+
#### Parameter {/*ref-callback-parameters*/}
298266

299-
* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
267+
* `node`: Sebuah simpul DOM. React akan memberikan simpul DOM kepada Anda saat ref dilampirkan. Kecuali Anda memberikan referensi fungsi yang sama untuk *callback* `ref` pada setiap render, *callback* akan dibersihkan sementara dan dibuat ulang selama setiap render ulang komponen.
300268

301269
<Note>
302270

303-
#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
271+
#### React 19 menambahkan fungsi pembersihan untuk *callback* `ref`. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
304272

305273
To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
306274

307275
</Note>
308276

309-
#### Returns {/*returns*/}
277+
#### Kembalian {/*returns*/}
310278

311-
* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
279+
* **opsional** `fungsi pembersihan`: Ketika `ref` dilepaskan, React akan memanggil fungsi pembersihan. Jika suatu fungsi tidak dikembalikan oleh *callback* `ref`, React akan memanggil *callback* lagi dengan `null` sebagai argumen ketika `ref` dilepaskan. Perilaku ini akan dihapus di versi mendatang.
312280

313-
#### Caveats {/*caveats*/}
281+
#### Catatan Penting {/*caveats*/}
314282

315-
* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
316-
* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
317-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
283+
* Ketika mode Strict diaktifkan, React akan **menjalankan satu siklus *setup+cleanup* khusus pengembangan tambahan** sebelum penyiapan sebenarnya yang pertama. Ini adalah *stress-test* yang memastikan bahwa logika pembersihan Anda "mencerminkan" logika pengaturan Anda dan menghentikan atau membatalkan apa pun yang sedang dilakukan pengaturan. Jika ini menyebabkan masalah, implementasikan fungsi pembersihan.
284+
* Ketika Anda mengoper *callback* `ref` *yang berbeda*, React akan memanggil fungsi pembersihan *callback* *sebelumnya* jika disediakan. Jika fungsi pembersihan tidak ditentukan, callback `ref` akan dipanggil dengan `null` sebagai argumennya. Fungsi *next* akan dipanggil dengan simpul DOM.
318285

319286
---
320287

src/content/reference/react-dom/components/form.md

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@
22
title: "<form>"
33
---
44

5-
<<<<<<< HEAD
6-
<Canary>
7-
8-
Ekstensi React untuk `<form>` saat ini hanya tersedia di kanal *canary* dan eksperimental React. Pada rilis stabil React, `<form>` hanya berfungsi sebagai [komponen HTML bawaan peramban](https://react.dev/reference/react-dom/components#all-html-components). Pelajari lebih lanjut tentang [kanal rilis React di sini](/community/versioning-policy#all-release-channels).
9-
10-
</Canary>
11-
12-
13-
=======
14-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
155
<Intro>
166

177
[Komponen `<form>` bawaan peramban](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) memungkinkan Anda membuat kontrol interaktif untuk mengirimkan informasi.
@@ -60,11 +50,7 @@ Untuk membuat kontrol interaktif untuk mengirimkan informasi, render [komponen `
6050

6151
### Menangani pengiriman formulir di klien {/*handle-form-submission-on-the-client*/}
6252

63-
<<<<<<< HEAD
64-
Lepaskan sebuah fungsi ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) akan diteruskan ke fungsi sebagai argumen sehingga Anda dapat mengakses data yang dikirimkan oleh formulir. Ini berbeda dari konvensional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), yang hanya menerima URL.
65-
=======
66-
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
67-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
53+
Lepaskan sebuah fungsi ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) akan diteruskan ke fungsi sebagai argumen sehingga Anda dapat mengakses data yang dikirimkan oleh formulir. Ini berbeda dari [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action) konvensional, yang hanya menerima URL.
6854

6955
<Sandpack>
7056

@@ -85,23 +71,13 @@ export default function Search() {
8571

8672
</Sandpack>
8773

88-
<<<<<<< HEAD
89-
### Menangani pengiriman formulir dengan Server Action {/*handle-form-submission-with-a-server-action*/}
74+
### Menangani pengiriman formulir dengan Fungsi Server {/*handle-form-submission-with-a-server-action*/}
9075

91-
Render sebuah `<form>` dengan input dan tombol kirim. Lepaskan Server Action (sebuah fungsi yang ditandai dengan [`'use server'`](/reference/rsc/use-server)) ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit.
76+
Render sebuah `<form>` dengan input dan tombol kirim. Lepaskan Fungsi Server (sebuah fungsi yang ditandai dengan [`'use server'`](/reference/rsc/use-server)) ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit.
9277

93-
Melewatkan Server Action ke `<form action>` memungkinkan pengguna untuk mengirimkan formulir tanpa JavaScript yang diaktifkan atau sebelum kode dimuat. Ini menguntungkan bagi pengguna yang memiliki koneksi lambat, perangkat, atau yang memiliki JavaScript dinonaktifkan dan mirip dengan cara kerja formulir ketika URL diberikan ke prop `action`.
78+
Melewatkan Fungsi Server ke `<form action>` memungkinkan pengguna untuk mengirimkan formulir tanpa JavaScript yang diaktifkan atau sebelum kode dimuat. Ini menguntungkan bagi pengguna yang memiliki koneksi lambat, perangkat, atau yang memiliki JavaScript dinonaktifkan dan mirip dengan cara kerja formulir ketika URL diberikan ke prop `action`.
9479

95-
Anda dapat menggunakan *field* formulir tersembunyi untuk memberikan data ke aksi `<form>`'s. Server Action akan dipanggil dengan data *field* formulir tersembunyi sebagai *instance* dari [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
96-
=======
97-
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
98-
99-
Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
100-
101-
Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
102-
103-
You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
104-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
80+
Anda dapat menggunakan *field* formulir tersembunyi untuk memberikan data ke aksi `<form>`. Fungsi Server akan dipanggil dengan data *field* formulir tersembunyi sebagai *instance* dari [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
10581

10682
```jsx
10783
import { updateCart } from './lib.js';
@@ -140,11 +116,7 @@ function AddToCart({productId}) {
140116
}
141117
```
142118

143-
<<<<<<< HEAD
144-
Ketika `<form>` dirender oleh [Server Component](/reference/rsc/use-client), dan [Server Action](/reference/rsc/use-server) diteruskan ke prop `action` `<form>`, formulir akan [ditingkatkan secara progresif](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
145-
=======
146-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
147-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
119+
Ketika `<form>` dirender oleh [Server Component](/reference/rsc/use-client), dan [Fungsi Server](/reference/rsc/server-functions) diteruskan ke prop `action` `<form>`, formulir akan [ditingkatkan secara progresif](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
148120

149121
### Menampilkan status tertunda selama pengiriman formulir {/*display-a-pending-state-during-form-submission*/}
150122
Untuk menampilkan status tertunda ketika formulir sedang dikirim, Anda dapat memanggil Hook `useFormStatus` dalam komponen yang dirender dalam `<form>` dan membaca properti `pending` yang dikembalikan.
@@ -304,19 +276,11 @@ export default function Search() {
304276

305277
Menampilkan pesan kesalahan pengiriman formulir sebelum bundel JavaScript dimuat untuk peningkatan progresif mengharuskan bahwa:
306278

307-
<<<<<<< HEAD
308279
1. `<form>` dirender oleh [Server Component](/reference/rsc/use-client)
309-
1. fungsi yang diteruskan ke prop `action` `<form>` adalah [Server Action](/reference/rsc/use-server)
280+
1. fungsi yang diteruskan ke prop `action` `<form>` adalah [Fungsi Server](/reference/rsc/server-functions)
310281
1. Hook `useActionState` digunakan untuk menampilkan pesan kesalahan
311282

312-
`useActionState` mengambil dua parameter: sebuah [Server Action](/reference/rsc/use-server) dan sebuah *state* awal. `useActionState` mengembalikan dua nilai, sebuah variabel *state* dan sebuah aksi. Aksi yang dikembalikan oleh `useActionState` harus diteruskan ke prop `action` dari formulir. Variabel *state* yang dikembalikan oleh `useActionState` dapat digunakan untuk menampilkan pesan kesalahan. Nilai yang dikembalikan oleh [Server Action](/reference/rsc/use-server) yang diteruskan ke `useActionState` akan digunakan untuk memperbarui variabel *state*.
313-
=======
314-
1. `<form>` be rendered by a [Server Component](/reference/rsc/use-client)
315-
1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
316-
1. the `useActionState` Hook be used to display the error message
317-
318-
`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
319-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
283+
`useActionState` mengambil dua parameter: sebuah [Fungsi Server](/reference/rsc/server-functions) dan sebuah *state* awal. `useActionState` mengembalikan dua nilai, sebuah variabel *state* dan sebuah aksi. Aksi yang dikembalikan oleh `useActionState` harus diteruskan ke prop `action` dari formulir. Variabel *state* yang dikembalikan oleh `useActionState` dapat digunakan untuk menampilkan pesan kesalahan. Nilai yang dikembalikan oleh Fungsi Server yang diteruskan ke `useActionState` akan digunakan untuk memperbarui variabel *state*.
320284

321285
<Sandpack>
322286

src/content/reference/react-dom/components/index.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,7 @@ Komponen-komponen tersebut spesial dalam React karena dengan mengoper *prop* `va
3232

3333
## Komponen Sumber Daya dan Metadata {/*resource-and-metadata-components*/}
3434

35-
<<<<<<< HEAD
3635
Komponen bawaan peramban ini memungkinkan Anda memuat sumber daya external atau menyematkan metadata ke dokumen:
37-
=======
38-
These built-in browser components let you load external resources or annotate the document with metadata:
39-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
4036

4137
* [`<link>`](/reference/react-dom/components/link)
4238
* [`<meta>`](/reference/react-dom/components/meta)

0 commit comments

Comments
 (0)