Skip to content

Commit b4f9765

Browse files
hellopikmazipanmhaidarhanifresir014milhamm
authored
docs: translate API Reference -> react -> createFactory (#565)
Co-authored-by: Irfan Maulana <mazipanneh@gmail.com> Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com> Co-authored-by: Resi Respati <resir014@gmail.com> Co-authored-by: Muhammad Ilham Mubarak <m.ilham.mubarak@gmail.com>
1 parent 3b3816a commit b4f9765

File tree

1 file changed

+44
-43
lines changed

1 file changed

+44
-43
lines changed

src/content/reference/react/createFactory.md

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: createFactory
44

55
<Deprecated>
66

7-
This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
7+
API ini akan dihapus pada versi mayor React berikutnya. [Lihat beberapa alternatifnya.](#alternatives)
88

99
</Deprecated>
1010

1111
<Intro>
1212

13-
`createFactory` lets you create a function that produces React elements of a given type.
13+
`createFactory` memungkinkan Anda membuat fungsi yang menghasilkan elemen-elemen React dengan tipe yang ditentukan
1414

1515
```js
1616
const factory = createFactory(type)
@@ -22,57 +22,57 @@ const factory = createFactory(type)
2222

2323
---
2424

25-
## Reference {/*reference*/}
25+
## Referensi {/*reference*/}
2626

2727
### `createFactory(type)` {/*createfactory*/}
2828

29-
Call `createFactory(type)` to create a factory function which produces React elements of a given `type`.
29+
Panggil `createFactory(type)` untuk membuat sebuah fungsi pabrik (*factory function*) yang menghasilkan elemen-elemen React dengan `type` yang ditentukan.
3030

3131
```js
3232
import { createFactory } from 'react';
3333

3434
const button = createFactory('button');
3535
```
3636

37-
Then you can use it to create React elements without JSX:
37+
Lalu Anda dapat menggunakannya untuk membuat elemen-elemen React tanpa JSX :
3838

3939
```js
4040
export default function App() {
4141
return button({
4242
onClick: () => {
43-
alert('Clicked!')
43+
alert('Sudah diklik!')
4444
}
45-
}, 'Click me');
45+
}, 'Klik saya');
4646
}
4747
```
4848

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

51-
#### Parameters {/*parameters*/}
51+
#### Parameter {/*parameters*/}
5252

53-
* `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)).
53+
* `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)).
5454

55-
#### Returns {/*returns*/}
55+
#### Kembalian {/*returns*/}
5656

57-
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`.
57+
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.
5858

5959
---
6060

61-
## Usage {/*usage*/}
61+
## Penggunaan {/*usage*/}
6262

63-
### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/}
63+
### Membuat elemen-elemen React dengan menggunakan fungsi pabrik {/*creating-react-elements-with-a-factory*/}
6464

65-
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.
65+
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
6666

67-
Call `createFactory` to create a *factory function* for a specific element type like `'button'`:
67+
Panggil `createFactory` untuk membuat sebuah fungsi pabrik untuk tipe elemen tertentu seperti `'button'`:
6868

6969
```js
7070
import { createFactory } from 'react';
7171

7272
const button = createFactory('button');
7373
```
7474

75-
Calling that factory function will produce React elements with the props and children you have provided:
75+
Memanggil fungsi pabrik tersebut akan menghasilkan elemen-elemen React dengan props dan children yang telah Anda berikan:
7676

7777
<Sandpack>
7878

@@ -84,23 +84,23 @@ const button = createFactory('button');
8484
export default function App() {
8585
return button({
8686
onClick: () => {
87-
alert('Clicked!')
87+
alert('Sudah diklik!')
8888
}
89-
}, 'Click me');
89+
}, 'Klik saya');
9090
}
9191
```
9292

9393
</Sandpack>
9494

95-
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.
95+
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`:
9696

9797
---
9898

99-
## Alternatives {/*alternatives*/}
99+
## Alternatif {/*alternatives*/}
100100

101-
### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/}
101+
### Menyalin `createFactory` ke dalam proyek Anda {/*copying-createfactory-into-your-project*/}
102102

103-
If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project:
103+
Jika proyek Anda memiliki banyak panggilan `createFactory`, salin implementasi `createFactory.js` ini ke dalam proyek Anda:
104104

105105
<Sandpack>
106106

@@ -112,9 +112,9 @@ const button = createFactory('button');
112112
export default function App() {
113113
return button({
114114
onClick: () => {
115-
alert('Clicked!')
115+
alert('Sudah diklik!')
116116
}
117-
}, 'Click me');
117+
}, 'Klik saya');
118118
}
119119
```
120120

@@ -128,13 +128,13 @@ export function createFactory(type) {
128128

129129
</Sandpack>
130130

131-
This lets you keep all of your code unchanged except the imports.
131+
Ini memungkinkan Anda menjaga semua kode Anda tetap tidak berubah kecuali impor-impornya.
132132

133133
---
134134

135-
### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/}
135+
### Mengganti `createFactory` dengan `createElement` {/*replacing-createfactory-with-createelement*/}
136136

137-
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:
137+
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:
138138

139139
```js {1,3,6}
140140
import { createFactory } from 'react';
@@ -144,13 +144,13 @@ const button = createFactory('button');
144144
export default function App() {
145145
return button({
146146
onClick: () => {
147-
alert('Clicked!')
147+
alert('Sudah diklik!')
148148
}
149-
}, 'Click me');
149+
}, 'Klik saya');
150150
}
151151
```
152152

153-
with this code:
153+
dengan kode ini:
154154

155155

156156
```js {1,4}
@@ -159,13 +159,13 @@ import { createElement } from 'react';
159159
export default function App() {
160160
return createElement('button', {
161161
onClick: () => {
162-
alert('Clicked!')
162+
alert('Sudah diklik!')
163163
}
164-
}, 'Click me');
164+
}, 'Klik saya');
165165
}
166166
```
167167

168-
Here is a complete example of using React without JSX:
168+
Berikut ini adalah contoh lengkap penggunaan React tanpa JSX:
169169

170170
<Sandpack>
171171

@@ -175,29 +175,29 @@ import { createElement } from 'react';
175175
export default function App() {
176176
return createElement('button', {
177177
onClick: () => {
178-
alert('Clicked!')
178+
alert('Sudah diklik!')
179179
}
180-
}, 'Click me');
180+
}, 'Klik saya');
181181
}
182182
```
183183

184184
</Sandpack>
185185

186186
---
187187

188-
### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/}
188+
### Mengganti `createFactory` dengan JSX {/*replacing-createfactory-with-jsx*/}
189189

190-
Finally, you can use JSX instead of `createFactory`. This is the most common way to use React:
190+
Akhirnya, Anda dapat menggunakan JSX sebagai pengganti `createFactory`. Ini adalah cara yang paling umum digunakan dalam penggunaan React:
191191

192192
<Sandpack>
193193

194194
```js App.js
195195
export default function App() {
196196
return (
197197
<button onClick={() => {
198-
alert('Clicked!');
198+
alert('Sudah diklik!');
199199
}}>
200-
Click me
200+
Klik saya
201201
</button>
202202
);
203203
};
@@ -207,7 +207,8 @@ export default function App() {
207207

208208
<Pitfall>
209209

210-
Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`:
210+
211+
Terkadang, kode yang ada mungkin mengirimkan beberapa variabel sebagai `type` daripada konstan seperti `'button'`:
211212

212213
```js {3}
213214
function Heading({ isSubheading, ...props }) {
@@ -217,7 +218,7 @@ function Heading({ isSubheading, ...props }) {
217218
}
218219
```
219220

220-
To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`:
221+
Untuk melakukan hal yang sama dalam JSX, Anda perlu mengganti nama variabel Anda agar diawali dengan huruf kapital seperti `Type`:
221222

222223
```js {2,3}
223224
function Heading({ isSubheading, ...props }) {
@@ -226,6 +227,6 @@ function Heading({ isSubheading, ...props }) {
226227
}
227228
```
228229

229-
Otherwise React will interpret `<type>` as a built-in HTML tag because it is lowercase.
230+
Sebaliknya, React akan menafsirkan `<type>` sebagai tag HTML bawaan karena ditulis dengan huruf kecil.
230231

231232
</Pitfall>

0 commit comments

Comments
 (0)