From bcff2af6a1f3fb132843ee8a2c7ada74985a1702 Mon Sep 17 00:00:00 2001 From: hellopik Date: Mon, 15 May 2023 14:15:02 +0700 Subject: [PATCH 1/4] docs: translate createFactory --- src/content/reference/react/createFactory.md | 89 ++++++++++---------- 1 file changed, 45 insertions(+), 44 deletions(-) diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md index eb851ad97..4858d1fec 100644 --- a/src/content/reference/react/createFactory.md +++ b/src/content/reference/react/createFactory.md @@ -1,16 +1,16 @@ --- -title: createFactory +Judul : createFactory --- -This API will be removed in a future major version of React. [See the alternatives.](#alternatives) +API ini akan dihapus pada versi utama React di masa depan [Lihat beberapa alternatifnya.](#alternatives) -`createFactory` lets you create a function that produces React elements of a given type. +`createFactory` memungkinkan Anda membuat fungsi yang menghasilkan elemen-elemen React dengan tipe yang ditentukan ```js const factory = createFactory(type) @@ -22,11 +22,11 @@ const factory = createFactory(type) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `createFactory(type)` {/*createfactory*/} -Call `createFactory(type)` to create a factory function which produces React elements of a given `type`. +Panggil `createFactory(type)` untuk membuat fungsi pabrik yang menghasilkan elemen-elemen React dengan `type` yang ditentukan. ```js import { createFactory } from 'react'; @@ -34,37 +34,37 @@ import { createFactory } from 'react'; const button = createFactory('button'); ``` -Then you can use it to create React elements without JSX: +Lalu Anda dapat menggunakannya untuk membuat elemen-elemen React tanpa JSX : ```js export default function App() { return button({ onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` -[See more examples below.](#usage) +[Lihat contoh-contoh lainnya di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)). +* `type`: Argumen `type` harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti (fungsi, kelas, atau komponen khusus seperti [`Fragment`](/reference/react/Fragment)). -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} -Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`. +Mengembalikan sebuah fungsi pabrik. Fungsi pabrik tersebut menerima objek `props` sebagai argumen pertama, diikuti oleh daftar argumen `...children`, dan mengembalikan elemen React dengan `type`, `props`, dan `children` yang diberikan. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/} +### Membuat elemen-elemen React dengan menggunakan fungsi pabrik {/*creating-react-elements-with-a-factory*/} -Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX. +Meskipun sebagian besar proyek React menggunakan [JSX](/learn/writing-markup-with-jsx) untuk mendeskripsikan antarmuka pengguna, JSX tidak diperlukan. Di masa lalu, `createFactory` digunakan sebagai salah satu cara untuk mendeskripsikan antarmuka pengguna tanpa menggunakan JSX -Call `createFactory` to create a *factory function* for a specific element type like `'button'`: +Panggil `createFactory` untuk membuat sebuah fungsi pabrik untuk tipe elemen tertentu seperti `'button'`: ```js import { createFactory } from 'react'; @@ -72,7 +72,7 @@ import { createFactory } from 'react'; const button = createFactory('button'); ``` -Calling that factory function will produce React elements with the props and children you have provided: +Memanggil fungsi pabrik tersebut akan menghasilkan elemen-elemen React dengan props dan children yang telah Anda berikan: @@ -84,23 +84,23 @@ const button = createFactory('button'); export default function App() { return button({ onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` -This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below. +Berikut adalah bagaimana `createFactory` digunakan sebagai alternatif untuk JSX. Namun, `createFactory` sudah tidak digunakan lagi (deprecated), dan Anda sebaiknya tidak menggunakan `createFactory` dalam kode baru. Berikut adalah cara melakukan migrasi dari `createFactory`: --- -## Alternatives {/*alternatives*/} +## Alternatif {/*alternatives*/} -### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/} +### Menyalin `createFactory` ke dalam proyek Anda {/*copying-createfactory-into-your-project*/} -If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project: +Jika proyek Anda memiliki banyak panggilan `createFactory`, salin implementasi `createFactory.js` ini ke dalam proyek Anda: @@ -112,9 +112,9 @@ const button = createFactory('button'); export default function App() { return button({ onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` @@ -128,13 +128,13 @@ export function createFactory(type) { -This lets you keep all of your code unchanged except the imports. +Ini memungkinkan Anda menjaga semua kode Anda tetap tidak berubah kecuali impor-impornya. --- -### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/} +### Mengganti `createFactory` dengan `createElement` {/*replacing-createfactory-with-createelement*/} -If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code: +Jika Anda memiliki beberapa panggilan `createFactory` yang tidak masalah untuk dipindahkan secara manual, dan Anda tidak ingin menggunakan JSX, Anda dapat menggantikan setiap panggilan fungsi pabrik dengan panggilan [`createElement`](/reference/react/createElement). Sebagai contoh, Anda dapat menggantikan kode ini: ```js {1,3,6} import { createFactory } from 'react'; @@ -144,13 +144,13 @@ const button = createFactory('button'); export default function App() { return button({ onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` -with this code: +dengan kode ini: ```js {1,4} @@ -159,13 +159,13 @@ import { createElement } from 'react'; export default function App() { return createElement('button', { onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` -Here is a complete example of using React without JSX: +Berikut ini adalah contoh lengkap penggunaan React tanpa JSX: @@ -175,9 +175,9 @@ import { createElement } from 'react'; export default function App() { return createElement('button', { onClick: () => { - alert('Clicked!') + alert('Sudah diklik!') } - }, 'Click me'); + }, 'Klik saya'); } ``` @@ -185,9 +185,9 @@ export default function App() { --- -### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/} +### Mengganti `createFactory` dengan JSX {/*replacing-createfactory-with-jsx*/} -Finally, you can use JSX instead of `createFactory`. This is the most common way to use React: +Akhirnya, Anda dapat menggunakan JSX sebagai pengganti `createFactory`. Ini adalah cara yang paling umum digunakan dalam penggunaan React: @@ -195,9 +195,9 @@ Finally, you can use JSX instead of `createFactory`. This is the most common way export default function App() { return ( ); }; @@ -207,7 +207,8 @@ export default function App() { -Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`: + +Terkadang, kode yang ada mungkin mengirimkan beberapa variabel sebagai `type` daripada konstan seperti `'button'`: ```js {3} function Heading({ isSubheading, ...props }) { @@ -217,7 +218,7 @@ function Heading({ isSubheading, ...props }) { } ``` -To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`: +Untuk melakukan hal yang sama dalam JSX, Anda perlu mengganti nama variabel Anda agar diawali dengan huruf kapital seperti `Type`: ```js {2,3} function Heading({ isSubheading, ...props }) { @@ -226,6 +227,6 @@ function Heading({ isSubheading, ...props }) { } ``` -Otherwise React will interpret `` as a built-in HTML tag because it is lowercase. +Sebaliknya, React akan menafsirkan `` sebagai tag HTML bawaan karena ditulis dengan huruf kecil. From 0128c87809677bd385cfa7f25378a995f16dd249 Mon Sep 17 00:00:00 2001 From: hellopik Date: Tue, 16 May 2023 09:54:13 +0700 Subject: [PATCH 2/4] docs: fixing typo on createFactory translation --- src/content/reference/react/createFactory.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md index 4858d1fec..e4114c890 100644 --- a/src/content/reference/react/createFactory.md +++ b/src/content/reference/react/createFactory.md @@ -50,7 +50,7 @@ export default function App() { #### Parameter {/*parameters*/} -* `type`: Argumen `type` harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti (fungsi, kelas, atau komponen khusus seperti [`Fragment`](/reference/react/Fragment)). +* `type`: Argumen `type` harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti [`Fragment`](/reference/react/Fragment)). #### Kembalian {/*returns*/} From bc515fe20bc909167aa42444654fd2e2533ec515 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Mon, 26 Jun 2023 17:15:30 +0700 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Irfan Maulana --- src/content/reference/react/createFactory.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md index e4114c890..0dcd6f1cb 100644 --- a/src/content/reference/react/createFactory.md +++ b/src/content/reference/react/createFactory.md @@ -4,7 +4,7 @@ Judul : createFactory -API ini akan dihapus pada versi utama React di masa depan [Lihat beberapa alternatifnya.](#alternatives) +API ini akan dihapus pada versi mayor React berikutnya. [Lihat beberapa alternatifnya.](#alternatives) @@ -26,7 +26,7 @@ const factory = createFactory(type) ### `createFactory(type)` {/*createfactory*/} -Panggil `createFactory(type)` untuk membuat fungsi pabrik yang menghasilkan elemen-elemen React dengan `type` yang ditentukan. +Panggil `createFactory(type)` untuk membuat sebuah fungsi pabrik (*factory function*) yang menghasilkan elemen-elemen React dengan `type` yang ditentukan. ```js import { createFactory } from 'react'; @@ -50,7 +50,7 @@ export default function App() { #### Parameter {/*parameters*/} -* `type`: Argumen `type` harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti [`Fragment`](/reference/react/Fragment)). +* `type`: Argumen `type` harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti `'div'` atau `'span'`), atau komponen React (fungsi, kelas, atau komponen khusus seperti [`Fragment`](/reference/react/Fragment)). #### Kembalian {/*returns*/} From 65da55270edf4aaf0e99d4e400c0b815bbe16528 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Tue, 27 Jun 2023 09:12:19 +0700 Subject: [PATCH 4/4] Update src/content/reference/react/createFactory.md --- src/content/reference/react/createFactory.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md index 0dcd6f1cb..46e2350b8 100644 --- a/src/content/reference/react/createFactory.md +++ b/src/content/reference/react/createFactory.md @@ -1,5 +1,5 @@ --- -Judul : createFactory +title: createFactory ---