From aeea3861a944f9c5af85fab3b3aa02b4b17f6424 Mon Sep 17 00:00:00 2001 From: Audi Date: Thu, 27 Apr 2023 21:40:13 +0800 Subject: [PATCH 01/12] translate fragment to caveats section --- src/content/reference/react/Fragment.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 638450405..23ceeac52 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, often used via `<>...` syntax, lets you group elements without a wrapper node. +``, atau sering digunakan melalui sintaksis `<>...`, memungkinkan anda mengelompokkan elemen tanpa pembungkus node. ```js <> @@ -19,19 +19,19 @@ title: (<>...) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `` {/*fragment*/} -Wrap elements in `` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<>` is shorthand for `` in most cases. +Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana anda membutuhkan satu elemen. Mengelompokkan element di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. Tag JSX kosong `<>` adalah singkatan untuk `` dalam banyak kasus. #### Props {/*props*/} -- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **opsional** `key`: Fragment yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) -#### Caveats {/*caveats*/} +#### Peringatan {/*caveats*/} -- If you want to pass `key` to a Fragment, you can't use the `<>...` syntax. You have to explicitly import `Fragment` from `'react'` and render `...`. +- Jika Anda ingin oper `key` ke Fragment, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimport `Fragment` dari `'react'` dan _render_ `...`. - React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) @@ -131,7 +131,7 @@ function CloseDialog() { ); return ( - Are you sure you want to leave this page? + Apakah anda yakin untuk meninggalkan halaman ini? ); } From c2ee6d8f64015072664ff1dcac5951e534a4fb40 Mon Sep 17 00:00:00 2001 From: Audi Date: Fri, 28 Apr 2023 21:33:18 +0800 Subject: [PATCH 02/12] translate finish --- src/content/reference/react/Fragment.md | 46 ++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 23ceeac52..b9dc31b7b 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, atau sering digunakan melalui sintaksis `<>...`, memungkinkan anda mengelompokkan elemen tanpa pembungkus node. +``, atau sering digunakan melalui sintaksis `<>...`, memungkinkan Anda mengelompokkan elemen tanpa pembungkus *node*. ```js <> @@ -23,25 +23,25 @@ title: (<>...) ### `` {/*fragment*/} -Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana anda membutuhkan satu elemen. Mengelompokkan element di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. Tag JSX kosong `<>` adalah singkatan untuk `` dalam banyak kasus. +Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana Anda membutuhkan satu elemen. Mengelompokkan element di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. Tag JSX kosong `<>` adalah singkatan untuk `` dalam banyak kasus. #### Props {/*props*/} -- **opsional** `key`: Fragment yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **opsional** `key`: *Fragment* yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [*key*.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Peringatan {/*caveats*/} -- Jika Anda ingin oper `key` ke Fragment, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimport `Fragment` dari `'react'` dan _render_ `...`. +- Jika Anda ingin oper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan *render* `...`. -- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda *rendering* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda *rendering* `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- -## Usage {/*usage*/} +## Pengunaan {/*usage*/} -### Returning multiple elements {/*returning-multiple-elements*/} +### Mengembalikan banyak elemen {/*returning-multiple-elements*/} -Use `Fragment`, or the equivalent `<>...` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group: +Gunakan `Fragment`, atau sintaksis `<>...`, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen dimana saja, dimana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan *Fragment*, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai grup: ```js {3,6} function Post() { @@ -54,7 +54,7 @@ function Post() { } ``` -Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `

` DOM nodes appear as siblings without wrappers around them: +_Fragment_ sangat berguna karena mengelompokkan elemen dengan _Fragment_ tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat browser, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: @@ -94,9 +94,9 @@ function PostBody({ body }) { -#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Bagaimana menulis *Fragment* tanpa spesial sintaksis? {/*how-to-write-a-fragment-without-the-special-syntax*/} -The example above is equivalent to importing `Fragment` from React: +Contoh di atas sama dengan mengimpor `Fragment` dari React: ```js {1,5,8} import { Fragment } from 'react'; @@ -111,15 +111,15 @@ function Post() { } ``` -Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments) +Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [oper `key` ke `Fragment` Anda.](#rendering-a-list-of-fragments) --- -### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/} +### Menentukan banyak elemen ke variabel {/*assigning-multiple-elements-to-a-variable*/} -Like any other element, you can assign Fragment elements to variables, pass them as props, and so on: +Seperti komponen yang lain, Anda bisa menentukan elemen *Fragment* ke variabel, dan oper mereka sebagai *props*, dan seterusnya: ```js function CloseDialog() { @@ -139,17 +139,17 @@ function CloseDialog() { --- -### Grouping elements with text {/*grouping-elements-with-text*/} +### Mengelompokkan elemen dengan teks {/*grouping-elements-with-text*/} -You can use `Fragment` to group text together with components: +Anda bisa mengunakan `Fragment` untuk mengelompokkan teks dengan komponen: ```js function DateRangePicker({ start, end }) { return ( <> - From + Dari - to + Ke ); @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} +### Merender daftar *Fragment* {/*rendering-a-list-of-fragments*/} -Here's a situation where you need to write `Fragment` explicitly instead of using the `<>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute: +Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [merender beberapa elemen dalam loop](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam loop adalah *Fragment*, Anda perlu menggunakan sintaksis elemen JSX normal untuk menyediakan atribut `key`: ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: +Anda bisa memeriksa DOM untuk memastikan bahwa tidak ada elemen pembungkus di sekitar anak *Fragment*: @@ -181,8 +181,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the import { Fragment } from 'react'; const posts = [ - { id: 1, title: 'An update', body: "It's been a while since I posted..." }, - { id: 2, title: 'My new blog', body: 'I am starting a new blog!' } + { id: 1, title: 'Sebuah pembaharuan', body: "Sudah lama tidak posting..." }, + { id: 2, title: 'Blog baru saya', body: 'Saya memulai blog baru!' } ]; export default function Blog() { From c133b69d4ddba63ab0cfd5f36aa6711fd5a5b87c Mon Sep 17 00:00:00 2001 From: Audi Date: Sat, 29 Apr 2023 13:20:50 +0800 Subject: [PATCH 03/12] fix: apply suggestion besides --- src/content/reference/react/Fragment.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index b9dc31b7b..7afeb2a4f 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -27,13 +27,13 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima #### Props {/*props*/} -- **opsional** `key`: *Fragment* yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [*key*.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- `key` **opsional**: *Fragment* yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Peringatan {/*caveats*/} -- Jika Anda ingin oper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan *render* `...`. +- Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan merender `...`. -- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda *rendering* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda *rendering* `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda merender dari `<>` ke `[]` atau sebaliknya, atau ketika Anda merender `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- @@ -111,7 +111,7 @@ function Post() { } ``` -Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [oper `key` ke `Fragment` Anda.](#rendering-a-list-of-fragments) +Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [mengoper `key` ke `Fragment` Anda.](#rendering-a-list-of-fragments) @@ -119,7 +119,7 @@ Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [oper `key` ke `Fragm ### Menentukan banyak elemen ke variabel {/*assigning-multiple-elements-to-a-variable*/} -Seperti komponen yang lain, Anda bisa menentukan elemen *Fragment* ke variabel, dan oper mereka sebagai *props*, dan seterusnya: +Seperti komponen yang lain, Anda bisa menentukan elemen *Fragment* ke variabel, dan mengoper mereka sebagai *props*, dan seterusnya: ```js function CloseDialog() { From ca8f852d2588ff9a4f8b1ed2c1559a96599cf3cf Mon Sep 17 00:00:00 2001 From: Audi Date: Sun, 30 Apr 2023 15:59:58 +0800 Subject: [PATCH 04/12] fix: merender to me-*render* and peringatan to caveats --- src/content/reference/react/Fragment.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 7afeb2a4f..fe346f010 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -29,11 +29,11 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima - `key` **opsional**: *Fragment* yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) -#### Peringatan {/*caveats*/} +#### Caveats {/*caveats*/} -- Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan merender `...`. +- Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan me-*render* `...`. -- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda merender dari `<>` ke `[]` atau sebaliknya, atau ketika Anda merender `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda merender `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Merender daftar *Fragment* {/*rendering-a-list-of-fragments*/} +### Me-*render* daftar *Fragment* {/*rendering-a-list-of-fragments*/} -Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [merender beberapa elemen dalam loop](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam loop adalah *Fragment*, Anda perlu menggunakan sintaksis elemen JSX normal untuk menyediakan atribut `key`: +Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [me-*render* beberapa elemen dalam loop](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam loop adalah *Fragment*, Anda perlu menggunakan sintaksis elemen JSX normal untuk menyediakan atribut `key`: ```js {3,6} function Blog() { From 86e31fb0715671c50c98b7c268de39891bd430af Mon Sep 17 00:00:00 2001 From: Audi Date: Sun, 30 Apr 2023 16:05:42 +0800 Subject: [PATCH 05/12] fix: set italic for non-bahasa word --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index fe346f010..3ba6266cf 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -23,7 +23,7 @@ title: (<>...) ### `` {/*fragment*/} -Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana Anda membutuhkan satu elemen. Mengelompokkan element di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. Tag JSX kosong `<>` adalah singkatan untuk `` dalam banyak kasus. +Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana Anda membutuhkan satu elemen. Mengelompokkan elemen di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. *Tag JSX* kosong `<>` adalah singkatan untuk `` dalam banyak kasus. #### Props {/*props*/} @@ -54,7 +54,7 @@ function Post() { } ``` -_Fragment_ sangat berguna karena mengelompokkan elemen dengan _Fragment_ tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat browser, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: +_Fragment_ sangat berguna karena mengelompokkan elemen dengan _Fragment_ tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat *browser*, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: @@ -160,7 +160,7 @@ function DateRangePicker({ start, end }) { ### Me-*render* daftar *Fragment* {/*rendering-a-list-of-fragments*/} -Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [me-*render* beberapa elemen dalam loop](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam loop adalah *Fragment*, Anda perlu menggunakan sintaksis elemen JSX normal untuk menyediakan atribut `key`: +Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [me-*render* beberapa elemen dalam *loop*](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam *loop* adalah *Fragment*, Anda perlu menggunakan sintaksis elemen *JSX* normal untuk menyediakan atribut `key`: ```js {3,6} function Blog() { From 26ad37ae2f74b3a882c5835b923bed27d6e7bf6f Mon Sep 17 00:00:00 2001 From: Audi Date: Mon, 1 May 2023 10:38:28 +0800 Subject: [PATCH 06/12] fix: remove 'atau' and change 'pembungkus' to 'wrapper' in fragment introdcution --- src/content/reference/react/Fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 3ba6266cf..7c58b3d1e 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, atau sering digunakan melalui sintaksis `<>...`, memungkinkan Anda mengelompokkan elemen tanpa pembungkus *node*. +``, sering digunakan melalui sintaksis `<>...`, memungkinkan Anda mengelompokkan elemen tanpa (*wrapper*) *node*. ```js <> From 856a7cacbcab86e65260b5d2e27c5743179dea7c Mon Sep 17 00:00:00 2001 From: Audi Date: Mon, 1 May 2023 12:00:44 +0800 Subject: [PATCH 07/12] fix: eksplisit word order --- src/content/reference/react/Fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 7c58b3d1e..aca4529e2 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -27,7 +27,7 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima #### Props {/*props*/} -- `key` **opsional**: *Fragment* yang dideklarasi dengan eksplisit sintaksis `` mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- `key` **opsional**: *Fragment* yang dideklarasi dengan sintaksis `` eksplisit mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Caveats {/*caveats*/} From f7c50b4d4c5b2d50f8346e545d85842c919ab8ce Mon Sep 17 00:00:00 2001 From: Audi Date: Mon, 1 May 2023 12:39:32 +0800 Subject: [PATCH 08/12] fix: remove italic in heading --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index aca4529e2..dde39bd9f 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -94,7 +94,7 @@ function PostBody({ body }) { -#### Bagaimana menulis *Fragment* tanpa spesial sintaksis? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Bagaimana menulis Fragment tanpa spesial sintaksis? {/*how-to-write-a-fragment-without-the-special-syntax*/} Contoh di atas sama dengan mengimpor `Fragment` dari React: @@ -149,7 +149,7 @@ function DateRangePicker({ start, end }) { <> Dari - Ke + ke ); @@ -158,7 +158,7 @@ function DateRangePicker({ start, end }) { --- -### Me-*render* daftar *Fragment* {/*rendering-a-list-of-fragments*/} +### Me-render daftar Fragment {/*rendering-a-list-of-fragments*/} Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<>`. Saat Anda [me-*render* beberapa elemen dalam *loop*](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam *loop* adalah *Fragment*, Anda perlu menggunakan sintaksis elemen *JSX* normal untuk menyediakan atribut `key`: From 66bb1475ee7652aa81c365642212deee9f33e948 Mon Sep 17 00:00:00 2001 From: Audi Date: Mon, 1 May 2023 20:08:42 +0800 Subject: [PATCH 09/12] fix: fix non bahasa italic wording and change the order of 'spesial' word --- src/content/reference/react/Fragment.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index dde39bd9f..08b0ba344 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, sering digunakan melalui sintaksis `<>...`, memungkinkan Anda mengelompokkan elemen tanpa (*wrapper*) *node*. +``, sering digunakan melalui sintaksis `<>...`, memungkinkan Anda mengelompokkan elemen tanpa *wrapper node*. ```js <> @@ -33,7 +33,7 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima - Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan me-*render* `...`. -- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda merender `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [disini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda me-*render* `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [di sini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- @@ -54,7 +54,7 @@ function Post() { } ``` -_Fragment_ sangat berguna karena mengelompokkan elemen dengan _Fragment_ tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat *browser*, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: +*Fragment* sangat berguna karena mengelompokkan elemen dengan *Fragment* tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat *browser*, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: @@ -94,7 +94,7 @@ function PostBody({ body }) { -#### Bagaimana menulis Fragment tanpa spesial sintaksis? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Bagaimana menulis Fragment tanpa sintaksis spesial? {/*how-to-write-a-fragment-without-the-special-syntax*/} Contoh di atas sama dengan mengimpor `Fragment` dari React: From b5ab458245b6891f0c0f6b83b84e7e838c02dd7e Mon Sep 17 00:00:00 2001 From: Audi Date: Tue, 2 May 2023 06:34:58 +0800 Subject: [PATCH 10/12] fix: 'assigning' word, change 'saja' to 'kedalaman', and add some word --- src/content/reference/react/Fragment.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 08b0ba344..4bff11de1 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -27,19 +27,19 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima #### Props {/*props*/} -- `key` **opsional**: *Fragment* yang dideklarasi dengan sintaksis `` eksplisit mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- `key` **opsional**: *Fragment* yang dideklarasikan dengan sintaksis `` eksplisit mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Caveats {/*caveats*/} - Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan me-*render* `...`. -- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda me-*render* `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat saja: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [di sini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<>` ke `[]` atau sebaliknya, atau ketika Anda me-*render* `<>` ke `` dan sebaliknya. Ini hanya bekerja dalam satu tingkat kedalaman: contohnya, beralih dari `<><>` ke `` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [di sini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- ## Pengunaan {/*usage*/} -### Mengembalikan banyak elemen {/*returning-multiple-elements*/} +### Menetapkan banyak elemen {/*returning-multiple-elements*/} Gunakan `Fragment`, atau sintaksis `<>...`, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen dimana saja, dimana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan *Fragment*, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai grup: @@ -54,7 +54,7 @@ function Post() { } ``` -*Fragment* sangat berguna karena mengelompokkan elemen dengan *Fragment* tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan alat *browser*, Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara tanpa pembungkus di sekitar mereka: +*Fragment* sangat berguna karena mengelompokkan elemen dengan *Fragment* tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan peralatan yang disediakan peramban (*browser tools*), Anda akan melihat semua DOM *node* `

` dan `

` muncul sebagai saudara (*siblings*) tanpa pembungkus di sekitar mereka: From 69836ac82cd117fb7c196c9f6019f2f40230f58b Mon Sep 17 00:00:00 2001 From: Audi Date: Tue, 2 May 2023 19:26:27 +0800 Subject: [PATCH 11/12] fix: rephrase some sentence --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 4bff11de1..583e03ec2 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -23,7 +23,7 @@ title: (<>...) ### `` {/*fragment*/} -Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dimana Anda membutuhkan satu elemen. Mengelompokkan elemen di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; Hal ini sama dengan tidak mengelompokkan elemen. *Tag JSX* kosong `<>` adalah singkatan untuk `` dalam banyak kasus. +Bungkus elemen-elemen di dalam `` untuk mengelompokkan mereka dalam situasi di mana Anda membutuhkan satu elemen. Mengelompokkan elemen di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; elemen-elemen tersebut seolah-olah seperti tidak dikelompokkan. *Tag JSX* kosong `<>` adalah singkatan untuk `` dalam banyak kasus. #### Props {/*props*/} @@ -41,7 +41,7 @@ Bungkus elemen di dalam `` untuk mengelompokkan elemen di situasi dima ### Menetapkan banyak elemen {/*returning-multiple-elements*/} -Gunakan `Fragment`, atau sintaksis `<>...`, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen dimana saja, dimana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan *Fragment*, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai grup: +Gunakan `Fragment`, atau sintaksis `<>...`, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen di mana saja, di mana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan *Fragment*, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai sebuah kelompok: ```js {3,6} function Post() { @@ -173,7 +173,7 @@ function Blog() { } ``` -Anda bisa memeriksa DOM untuk memastikan bahwa tidak ada elemen pembungkus di sekitar anak *Fragment*: +Anda bisa memeriksa DOM untuk memastikan bahwa tidak ada elemen pembungkus di sekitar anak-anak (*children*) *Fragment*: From 93906c98a1fad5d2efab8b563a9b0e7cee31d816 Mon Sep 17 00:00:00 2001 From: Zain Fathoni Date: Mon, 8 May 2023 23:40:36 +0800 Subject: [PATCH 12/12] docs(fragment): add missing "menentukan" to "menetapkan" changes Co-authored-by: Irfan Maulana --- src/content/reference/react/Fragment.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 583e03ec2..8b6cdcd2b 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -117,9 +117,9 @@ Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [mengoper `key` ke `F --- -### Menentukan banyak elemen ke variabel {/*assigning-multiple-elements-to-a-variable*/} +### Menetapkan banyak elemen ke variabel {/*assigning-multiple-elements-to-a-variable*/} -Seperti komponen yang lain, Anda bisa menentukan elemen *Fragment* ke variabel, dan mengoper mereka sebagai *props*, dan seterusnya: +Seperti komponen yang lain, Anda bisa menetapkan elemen *Fragment* ke variabel, dan mengoper mereka sebagai *props*, dan seterusnya: ```js function CloseDialog() {