Skip to content

docs: translate API Reference -> react-dom -> render #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 29, 2023
Merged

docs: translate API Reference -> react-dom -> render #589

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions src/content/reference/react-dom/render.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: render

<Deprecated>

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

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

</Deprecated>

<Intro>

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

```js
render(reactNode, domNode, callback?)
Expand All @@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)

---

## Reference {/*reference*/}
## Referensi {/*reference*/}

### `render(reactNode, domNode, callback?)` {/*render*/}

Call `render` to display a React component inside a browser DOM element.
Panggil `render` untuk menampilkan komponen React di dalam elemen DOM peramban.

```js
import { render } from 'react-dom';
Expand All @@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
render(<App />, domNode);
```

React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
React akan menampilkan `<App />` di dalam `domNode`, dan mengambil alih pengelolaan DOM di dalamnya.

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

[See more examples below.](#usage)
[Lihat contoh lebih lanjut di bawah ini.](#penggunaan)

#### Parameters {/*parameters*/}
#### Parameter {/*parameters*/}

* `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`.
* `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`.

* `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.
* `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.

* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
* **opsional** `callback`: Sebuah fungsi. Jika dilewatkan, React akan memanggilnya setelah komponen Anda ditempatkan ke dalam DOM.


#### Returns {/*returns*/}
#### Kembalian {/*returns*/}

`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
`render` biasanya mengembalikan nilai `null`. Namun, jika `reactNode` yang Anda berikan adalah sebuah komponen *class*, maka ia akan mengembalikan sebuah *instance* dari komponen tersebut.

#### Caveats {/*caveats*/}
#### Peringatan {/*caveats*/}

* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
* Pada React 18, `render` digantikan oleh [`createRoot`.](/reference/react-dom/client/createRoot) Silakan gunakan `createRoot` untuk React 18 dan seterusnya.

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

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

* 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`.
* 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`.

---

## Usage {/*usage*/}
## Penggunaan {/*usage*/}

Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
Panggil `render` untuk menampilkan <CodeStep step={1}>komponen React</CodeStep> di dalam <CodeStep step={2}>simpul DOM peramban</CodeStep>.

```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
import { render } from 'react-dom';
Expand All @@ -79,9 +79,9 @@ import App from './App.js';
render(<App />, document.getElementById('root'));
```

### Rendering the root component {/*rendering-the-root-component*/}
### Me-render komponen akar {/*rendering-the-root-component*/}

In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
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

<Sandpack>

Expand All @@ -95,26 +95,26 @@ render(<App />, document.getElementById('root'));

```js App.js
export default function App() {
return <h1>Hello, world!</h1>;
return <h1>Halo, dunia!</h1>;
}
```

</Sandpack>

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

---

### Rendering multiple roots {/*rendering-multiple-roots*/}
### Me-render beberapa akar {/*rendering-multiple-roots*/}

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

<Sandpack>

```html public/index.html
<nav id="navigation"></nav>
<main>
<p>This paragraph is not rendered by React (open index.html to verify).</p>
<p>Paragraf ini tidak di-render oleh React (buka index.html untuk memverifikasi).</p>
<section id="comments"></section>
</main>
```
Expand All @@ -139,8 +139,8 @@ render(
export function Navigation() {
return (
<ul>
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/">Beranda</NavLink>
<NavLink href="/about">Tentang</NavLink>
</ul>
);
}
Expand All @@ -157,8 +157,8 @@ export function Comments() {
return (
<>
<h2>Comments</h2>
<Comment text="Hello!" author="Sophie" />
<Comment text="How are you?" author="Sunil" />
<Comment text="Halo!" author="Sophie" />
<Comment text="Apa kabar?" author="Sunil" />
</>
);
}
Expand All @@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }

</Sandpack>

You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
Anda dapat menghancurkan pohon yang di-*render* dengan [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)

---

### Updating the rendered tree {/*updating-the-rendered-tree*/}
### Memperbarui pohon yang di-render {/*updating-the-rendered-tree*/}

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:
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:

<Sandpack>

Expand All @@ -206,13 +206,13 @@ setInterval(() => {
export default function App({counter}) {
return (
<>
<h1>Hello, world! {counter}</h1>
<input placeholder="Type something here" />
<h1>Halo, dunia! {counter}</h1>
<input placeholder="Ketik sesuatu disini" />
</>
);
}
```

</Sandpack>

It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
Tidak umum untuk memanggil `render` beberapa kali. Biasanya, Anda akan [update state](/reference/react/useState) di dalam komponen Anda.