Skip to content

Commit 0ace165

Browse files
r17xr17x
authored
docs: translate API Reference -> react-dom -> render (#589)
1 parent 1cf7e91 commit 0ace165

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

‎src/content/reference/react-dom/render.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ title: render
44

55
<Deprecated>
66

7-
This API will be removed in a future major version of React.
7+
API ini akan dihapus di versi utama React yang akan datang.
88

9-
In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
9+
Pada React 18, `render` digantikan oleh [`createRoot`.](/reference/react-dom/client/createRoot) Menggunakan `render` pada React 18 akan memperingatkan bahwa aplikasi Anda akan berperilaku seolah-olah menjalankan React 17. Pelajari lebih lanjut [di sini.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
1010

1111
</Deprecated>
1212

1313
<Intro>
1414

15-
`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
15+
`render` me-*render* bagian dari [JSX](/learn/writing-markup-with-jsx) ("Simpul React") ke dalam simpul DOM peramban.
1616

1717
```js
1818
render(reactNode, domNode, callback?)
@@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)
2424
2525
---
2626
27-
## Reference {/*reference*/}
27+
## Referensi {/*reference*/}
2828
2929
### `render(reactNode, domNode, callback?)` {/*render*/}
3030
31-
Call `render` to display a React component inside a browser DOM element.
31+
Panggil `render` untuk menampilkan komponen React di dalam elemen DOM peramban.
3232
3333
```js
3434
import { render } from 'react-dom';
@@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
3737
render(<App />, domNode);
3838
```
3939
40-
React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
40+
React akan menampilkan `<App />` di dalam `domNode`, dan mengambil alih pengelolaan DOM di dalamnya.
4141
42-
An app fully built with React will usually only have one `render` call with its root component. A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
42+
Sebuah aplikasi yang sepenuhnya dibangun dengan React biasanya hanya akan memiliki satu pemanggilan `render` dengan komponen akarnya. Sebuah halaman yang menggunakan "campuran" dari React untuk beberapa bagian dari halaman dapat memiliki panggilan `render` sebanyak yang dibutuhkan.
4343
44-
[See more examples below.](#usage)
44+
[Lihat contoh lebih lanjut di bawah ini.](#penggunaan)
4545
46-
#### Parameters {/*parameters*/}
46+
#### Parameter {/*parameters*/}
4747
48-
* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
48+
* `reactNode`: Sebuah *React node* yang ingin Anda tampilkan. Ini biasanya berupa bagian dari JSX seperti `<App />`, tetapi Anda juga dapat mengoperkan sebuah elemen React yang dibangun dengan [`createElement()`](/reference/react/createElement), sebuah `string`, sebuah `number`, `null`, atau `undefined`.
4949
50-
* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
50+
* `domNode`: Sebuah [elemen DOM.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React akan menampilkan `reactNode` yang Anda berikan di dalam elemen DOM ini. Mulai saat ini, React akan mengelola DOM di dalam `domNode` dan memperbaruinya ketika pohon React (*React tree*) Anda berubah.
5151
52-
* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
52+
* **opsional** `callback`: Sebuah fungsi. Jika dilewatkan, React akan memanggilnya setelah komponen Anda ditempatkan ke dalam DOM.
5353
5454
55-
#### Returns {/*returns*/}
55+
#### Kembalian {/*returns*/}
5656
57-
`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
57+
`render` biasanya mengembalikan nilai `null`. Namun, jika `reactNode` yang Anda berikan adalah sebuah komponen *class*, maka ia akan mengembalikan sebuah *instance* dari komponen tersebut.
5858
59-
#### Caveats {/*caveats*/}
59+
#### Peringatan {/*caveats*/}
6060
61-
* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
61+
* Pada React 18, `render` digantikan oleh [`createRoot`.](/reference/react-dom/client/createRoot) Silakan gunakan `createRoot` untuk React 18 dan seterusnya.
6262
63-
* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
63+
* Pertama kali Anda memanggil `render`, React akan menghapus semua konten HTML yang ada di dalam `domNode` sebelum me-*render* komponen React ke dalamnya. Jika `domNode` Anda berisi HTML yang dihasilkan oleh React di server atau selama proses membangun, gunakan [`hydrate()`](/reference/react-dom/hydrate) sebagai gantinya, yang akan melampirkan *event handler* ke HTML yang ada.
6464
65-
* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
65+
* Jika Anda memanggil `render` pada `domNode` yang sama lebih dari satu kali, React akan memperbarui DOM seperlunya untuk merefleksikan JSX terbaru yang Anda berikan. React akan memutuskan bagian mana dari DOM yang dapat digunakan kembali dan mana yang perlu dibuat ulang dengan ["mencocokkannya"](/learn/preserving-and-resetting-state) dengan pohon (*tree*) yang sebelumnya di-*render*. Memanggil `render` berkali-kali pada `domNode` itu serupa dengan memanggil fungsi [`set`](/reference/react/useState#setstate) pada komponen root: React menghindari pembaruan DOM yang tidak perlu.
6666
67-
* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
67+
* Jika aplikasi Anda sepenuhnya dibangun dengan React, kemungkinan besar Anda hanya akan memiliki satu pemanggilan `render` dalam aplikasi Anda. (Jika Anda menggunakan framework, framework tersebut mungkin akan melakukan pemanggilan ini untuk Anda.) Ketika Anda ingin me-*render* sebuah bagian dari JSX di bagian yang berbeda dari pohon DOM (*DOM tree*) yang bukan merupakan turunan dari komponen Anda (misalnya, sebuah *modal* atau *tooltip*), gunakan [`createPortal`](/reference/react-dom/createPortal) sebagai pengganti `render`.
6868
6969
---
7070
71-
## Usage {/*usage*/}
71+
## Penggunaan {/*usage*/}
7272
73-
Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
73+
Panggil `render` untuk menampilkan <CodeStep step={1}>komponen React</CodeStep> di dalam <CodeStep step={2}>simpul DOM peramban</CodeStep>.
7474
7575
```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
7676
import { render } from 'react-dom';
@@ -79,9 +79,9 @@ import App from './App.js';
7979
render(<App />, document.getElementById('root'));
8080
```
8181
82-
### Rendering the root component {/*rendering-the-root-component*/}
82+
### Me-render komponen akar {/*rendering-the-root-component*/}
8383
84-
In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
84+
Pada aplikasi yang sepenuhnya dibangun dengan React, **Anda biasanya hanya akan melakukan hal ini sekali saja pada saat memulai** - untuk me-*render* komponen "akar" (*the root componen
8585
8686
<Sandpack>
8787
@@ -95,26 +95,26 @@ render(<App />, document.getElementById('root'));
9595
9696
```js App.js
9797
export default function App() {
98-
return <h1>Hello, world!</h1>;
98+
return <h1>Halo, dunia!</h1>;
9999
}
100100
```
101101
102102
</Sandpack>
103103
104-
Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
104+
Biasanya Anda tidak perlu memanggil `render` lagi atau memanggilnya di banyak tempat. Mulai saat ini, React akan mengelola DOM aplikasi Anda. Untuk memperbarui UI, komponen Anda akan [use state.](/reference/react/useState)
105105
106106
---
107107
108-
### Rendering multiple roots {/*rendering-multiple-roots*/}
108+
### Me-render beberapa akar {/*rendering-multiple-roots*/}
109109
110-
If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
110+
Jika halaman Anda [tidak sepenuhnya dibangun dengan React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), panggil `render` untuk setiap bagian teratas dari UI yang dikelola oleh React.
111111
112112
<Sandpack>
113113
114114
```html public/index.html
115115
<nav id="navigation"></nav>
116116
<main>
117-
<p>This paragraph is not rendered by React (open index.html to verify).</p>
117+
<p>Paragraf ini tidak di-render oleh React (buka index.html untuk memverifikasi).</p>
118118
<section id="comments"></section>
119119
</main>
120120
```
@@ -139,8 +139,8 @@ render(
139139
export function Navigation() {
140140
return (
141141
<ul>
142-
<NavLink href="/">Home</NavLink>
143-
<NavLink href="/about">About</NavLink>
142+
<NavLink href="/">Beranda</NavLink>
143+
<NavLink href="/about">Tentang</NavLink>
144144
</ul>
145145
);
146146
}
@@ -157,8 +157,8 @@ export function Comments() {
157157
return (
158158
<>
159159
<h2>Comments</h2>
160-
<Comment text="Hello!" author="Sophie" />
161-
<Comment text="How are you?" author="Sunil" />
160+
<Comment text="Halo!" author="Sophie" />
161+
<Comment text="Apa kabar?" author="Sunil" />
162162
</>
163163
);
164164
}
@@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
177177
178178
</Sandpack>
179179
180-
You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
180+
Anda dapat menghancurkan pohon yang di-*render* dengan [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
181181
182182
---
183183
184-
### Updating the rendered tree {/*updating-the-rendered-tree*/}
184+
### Memperbarui pohon yang di-render {/*updating-the-rendered-tree*/}
185185
186-
You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
186+
Anda dapat memanggil `render` lebih dari satu kali pada simpul DOM yang sama. Selama struktur pohon komponen sesuai dengan apa yang sebelumnya di-*render*, React akan [mempertahankan state](/learn/preserving-and-resetting-state) Perhatikan bagaimana Anda dapat mengetik masukan (*input*), yang berarti pembaruan dari pemanggilan `render` yang berulang-ulang setiap detiknya tidak bersifat destruktif:
187187
188188
<Sandpack>
189189
@@ -206,13 +206,13 @@ setInterval(() => {
206206
export default function App({counter}) {
207207
return (
208208
<>
209-
<h1>Hello, world! {counter}</h1>
210-
<input placeholder="Type something here" />
209+
<h1>Halo, dunia! {counter}</h1>
210+
<input placeholder="Ketik sesuatu disini" />
211211
</>
212212
);
213213
}
214214
```
215215
216216
</Sandpack>
217217
218-
It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
218+
Tidak umum untuk memanggil `render` beberapa kali. Biasanya, Anda akan [update state](/reference/react/useState) di dalam komponen Anda.

0 commit comments

Comments
 (0)