Skip to content
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

Jump to bottom

docs: title component translation #704

Merged
merged 7 commits into from
Jul 31, 2024
Merged

docs: title component translation #704

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
120bada
init `title` translation
aroyan Jun 27, 2024
4124fb0
completed - ready for review
aroyan Jun 27, 2024
45b2fdd
hapus duplikat (.)
aroyan Jun 27, 2024
79c4d98
Update src/content/reference/react-dom/components/title.md
aroyan Jul 12, 2024
05a7378
Merge branch 'main' into title
aroyan Jul 12, 2024
bd390ff
Merge branch 'reactjs:main' into title
aroyan Jul 27, 2024
47610c3
use * for italic instead of _
aroyan Jul 27, 2024
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
44 changes: 22 additions & 22 deletions src/content/reference/react-dom/components/title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ canary: true

<Canary>

React's extensions to `<title>` are currently only available in React's canary and experimental channels. In stable releases of React `<title>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
Ekstensi React untuk `<title>` saat ini hanya tersedia di kanal *canary* dan eksperimental React. Pada rilis stabil React, `<title>` 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).

</Canary>


<Intro>

The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.
[Komponen bawaan peramban `<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) memungkinkan Anda untuk menentukan judul dari dokumen.

```js
<title>My Blog</title>
<title>Blog Saya</title>
```

</Intro>
Expand All @@ -24,45 +24,45 @@ The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/d

---

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

### `<title>` {/*title*/}

To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head.
Untuk menentukan judul dokmen, render [komponen bawaan peramban `<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). Anda dapat me-*render* `<title>` dari komponen apapun dan React akan selalu menempatkan elemen DOM yang sesuai di *document head*.

```js
<title>My Blog</title>
<title>Blog Saya</title>
```

[See more examples below.](#usage)
[Lihat contoh-contoh lainnya di bawah ini.](#usage)

#### Props {/*props*/}

`<title>` supports all [common element props.](/reference/react-dom/components/common#props)
`<title>` mendukung semua [element props yang umum.](/reference/react-dom/components/common#props)

* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
* `children`: `<title>` hanya menerima teks sebagai anak. Teks ini akan menjadi judul dokumen. Anda juga dapat meng-oper komponen Anda sendiri selama komponen tersebut hanya me-*render* teks.

#### Special rendering behavior {/*special-rendering-behavior*/}
#### Perilaku *render*-ing khusus {/*special-rendering-behavior*/}

React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
React akan selalu menempatkan elemen DOM yang sesuai dengan komponen `<title>` di dalam `<head>` dokumen, di mana pun elemen tersebut di-*render* di pohon React. `<head>` adalah satu-satunya tempat yang valid untuk `<title>` berada dalam DOM, namun tetap mudah dan membuat segala sesuatunya tetap dapat disusun jika komponen yang mewakili laman tertentu dapat me-*render* `<title>`-nya sendiri.

There are two exception to this:
* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.
Ada dua pengecualian untuk hal ini:
* Jika `<title>` berada dalam komponen `<svg>`, maka tidak ada perilaku khusus, karena dalam konteks ini tidak mewakili judul dokumen melainkan merupakan [anotasi aksesibilitas untuk grafik SVG tersebut](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
* Jika `<title>` memiliki prop [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop), maka tidak ada perilaku khusus, karena dalam hal ini dalam hal ini tidak mewakili judul dokumen melainkan metadata tentang bagian halaman tertentu.

<Pitfall>

Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.
Hanya *render* satu `<title>` dalam satu waktu. Jika lebih dari satu komponen me-*render* tag `<title>` secara bersamaan, React akan menempatkan semua judul tersebut di dokumen `head`. Jika hal ini terjadi, perilaku peramban dan mesin telusur tidak terdefinisi.

</Pitfall>

---

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

### Set the document title {/*set-the-document-title*/}
### Menyetel judul dokumen {/*set-the-document-title*/}

Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`.
*Render* komponen `<title>` dari komponen apapun dengan teks sebagai anak. React akan menempatkan node DOM `<title>` di dokumen `<head>`.

<SandpackWithHTMLOutput>

Expand All @@ -82,15 +82,15 @@ export default function ContactUsPage() {

</SandpackWithHTMLOutput>

### Use variables in the title {/*use-variables-in-the-title*/}
### Penggunaan variabel dalam title {/*use-variables-in-the-title*/}

The children of the `<title>` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this:
*Children* dari komponen `<title>` harus berupa string teks tunggal. (Atau satu nomor atau satu objek dengan metode `toString`.) Ini mungkin tidak terlihat jelas, tetapi menggunakan kurung kurawal JSX seperti ini:

```js
<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string
<title>Results page {pageNumber}</title> // 🔴 Masalah: Ini bukan string tunggal
```

... actually causes the `<title>` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string:
... sebenarnya menyebabkan komponen `<title>` mendapatkan array dua elemen sebagai turunan-nya (string `"Results page"` dan nilai `pageNumber`). Ini akan menyebabkan kesalahan. Sebagai gantinya, gunakan interpolasi string untuk meng-oper `<title>` satu string:

```js
<title>{`Results page ${pageNumber}`}</title>
Expand Down
Loading