Skip to content

Commit 0e6a711

Browse files
mhmmd-ysfmhmmd-ysf
authored
Translate Writing Markup with JSX (#499)
1 parent facd556 commit 0e6a711

File tree

1 file changed

+81
-79
lines changed

1 file changed

+81
-79
lines changed

‎src/content/learn/writing-markup-with-jsx.md

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,89 @@
11
---
2-
title: Writing Markup with JSX
2+
title: Menulis Markup dengan JSX
33
---
44

55
<Intro>
66

7-
*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
7+
JSX adalah perpanjangan sintaksis untuk menulis kode seperti *HTML* dalam file JavaScript. Meskipun ada beberapa cara lain, JSX lebih dipilih oleh sebagian besar *developer* React dan *codebase* karena kepadatannya.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* Why React mixes markup with rendering logic
14-
* How JSX is different from HTML
15-
* How to display information with JSX
13+
* Mengapa React mencampur *markup* dan logika *render*
14+
* Perbedaan JSX dengan HTML
15+
* Cara menampilkan informasi menggunakan JSX
1616

1717
</YouWillLearn>
1818

19-
## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
19+
## JSX: Meletakkan markup ke JavaScript {/*jsx-putting-markup-into-javascript*/}
2020

21-
The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
21+
Website selama ini terbuat dari HTML, CSS, dan JavaScript. Selama bertahun-tahun, pengembang *website* menaruh konten di HTML, desain di CSS, dan logika di JavaScript—tidak jarang di *file* yang berbeda! Konten dibangun di HTML sedangkan logika halaman disimpan secara terpisah dalam JavaScript:
2222

2323
<DiagramGroup>
2424

25-
<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
25+
<Diagram name="writing_jsx_html" height={237} width={325} alt="markup HTML dengan latar belakang berwarna ungu dan sebuah div dengan dua children tag: p dan form. ">
2626

2727
HTML
2828

2929
</Diagram>
3030

31-
<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
31+
<Diagram name="writing_jsx_js" height={237} width={325} alt="Tiga fungsi JavaScript dengan latar belakang kuning: onSubmit, onLogin, and onClick.">
3232

3333
JavaScript
3434

3535
</Diagram>
3636

3737
</DiagramGroup>
3838

39-
But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
39+
Namun, seiring dengan situs yang makin iteraktif, logika semakin menentukan konten. JavaScript mengatur HTML! Inilah mengapa **dalam React, logika *render* dan *markup* berada di satu tempat yang sama—komponen.**
4040

4141
<DiagramGroup>
4242

43-
<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
43+
<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="Komponen React dengan HTML dan JavaScript digabung dari contoh sebelumnya. Fungsi bernama Sidebar yang memanggil fungsi isLoggedIn, berwarna kuning. Tag p dari sebelumnya bersarang dalam fungsi berwarna ungu, dan sebuah tag Form mereferensi ke komponen yang ada di diagram berikutnya.">
4444

45-
`Sidebar.js` React component
45+
Komponen React `Sidebar.js`
4646

4747
</Diagram>
4848

49-
<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
49+
<Diagram name="writing_jsx_form" height={330} width={325} alt="Komponen React dengan HTML dan JavaScript dari contoh sebelumnya digabung. Fungsi bernama Form memiliki dua handler onClick dan onSubmit berwarna kuning. Setelah itu diikuti oleh HTML berwarna ungu. HTML tersebut memiliki elemen form dan elemen input di dalamnya, masing-masing dengan prop onClick.">
5050

51-
`Form.js` React component
51+
Komponen React `Form.js`
5252

5353
</Diagram>
5454

5555
</DiagramGroup>
5656

57-
Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
57+
Menggabungkan logika *render* dan *markup* untuk sebuah tombol memastikan mereka tersinkronasi dengan satu sama lain pada tiap perubahan. Sebaliknya, detil yang tidak berhubungan, *markup* untuk tombol dan *sidebar*, juga tidak terhubung dengan satu sama lain, membuat perubahan masing-masing menjadi lebih aman.
5858

59-
Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
59+
Masing-masing komponen React adalah fungsi JavaScript yang bisa memiliki *markup* yang di-*render* oleh React ke peramban. Komponen React menggunakan ekstensi sitaksis yang bernama JSX untuk merepresentasikan *markup* tersebut. JSX terlihat sangat mirip dengan HTML, namun lebih ketat dan dapat menampilkan informasi secara dinamis. Cara terbaik untuk memahami JSX adalah dengan langsung mengubah beberapa *markup* HTML menjadi JSX.
6060

6161
<Note>
6262

63-
JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
63+
JSX dan React adalah dua hal yang berbeda. Mereka masing-masing digunakan secara bersama, namun anda *dapat* [digunakan sendiri secara independen](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform).
64+
JSX merupakan ekstensi sintaks, sedangkan React adalah *library* JavaScript.
6465

6566
</Note>
6667

67-
## Converting HTML to JSX {/*converting-html-to-jsx*/}
68+
## Mengubah HTML menjadi JSX {/*converting-html-to-jsx*/}
6869

69-
Suppose that you have some (perfectly valid) HTML:
70+
Anggap anda memiliki HTML yang alid:
7071

7172
```html
72-
<h1>Hedy Lamarr's Todos</h1>
73+
<h1>Daftar Tugas Putri</h1>
7374
<img
7475
src="https://i.imgur.com/yXOvdOSs.jpg"
75-
alt="Hedy Lamarr"
76+
alt="Putri"
7677
class="photo"
7778
>
7879
<ul>
79-
<li>Invent new traffic lights
80-
<li>Rehearse a movie scene
81-
<li>Improve the spectrum technology
80+
<li>Mengerjakan PR
81+
<li>Pergi belanja
82+
<li>Minum vitamin
8283
</ul>
8384
```
8485

85-
And you want to put it into your component:
86+
Dan anda ingin meletakkannya di komponen:
8687

8788
```js
8889
export default function TodoList() {
@@ -92,7 +93,7 @@ export default function TodoList() {
9293
}
9394
```
9495

95-
If you copy and paste it as is, it will not work:
96+
Jika anda salin dan tempel secara langsung, maka dia tidak akan bekerja:
9697

9798

9899
<Sandpack>
@@ -101,16 +102,16 @@ If you copy and paste it as is, it will not work:
101102
export default function TodoList() {
102103
return (
103104
// This doesn't quite work!
104-
<h1>Hedy Lamarr's Todos</h1>
105+
<h1>Daftar Tugas Putri</h1>
105106
<img
106107
src="https://i.imgur.com/yXOvdOSs.jpg"
107-
alt="Hedy Lamarr"
108+
alt="Putri"
108109
class="photo"
109110
>
110111
<ul>
111-
<li>Invent new traffic lights
112-
<li>Rehearse a movie scene
113-
<li>Improve the spectrum technology
112+
<li>Mengerjakan PR
113+
<li>Pergi belanja
114+
<li>Minum vitamin
114115
</ul>
115116
);
116117
}
@@ -122,28 +123,28 @@ img { height: 90px }
122123

123124
</Sandpack>
124125

125-
This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
126+
Ini dikarenakan JSX lebih ketat dan memiliki banyak peraturan dibandingkan HTML! Jika anda membaca pesan *error* yang tertera, pesan tersebut akan mengarahkanmu untuk memperbaiki *markup*, atau anda bisa mengikuti panduan berikut.
126127

127128
<Note>
128129

129-
Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
130+
Umumnya, pesan *error* pada React akan memandu anda mencari sumber masalah yang ada di kode. Jangan lupa membaca pesan *error* jika anda *stuck*!
130131

131132
</Note>
132133

133-
## The Rules of JSX {/*the-rules-of-jsx*/}
134+
## Aturan JSX {/*the-rules-of-jsx*/}
134135

135-
### 1. Return a single root element {/*1-return-a-single-root-element*/}
136+
### 1. Hanya mengembalikan satu elemen {/*1-return-a-single-root-element*/}
136137

137-
To return multiple elements from a component, **wrap them with a single parent tag.**
138+
Untuk mengembalikan lebih dari satu elemen, **bungkus mereka dengan satu tag *parent*.**
138139

139-
For example, you can use a `<div>`:
140+
Contohnya, anda dapat menggunakan tag `<div>`:
140141

141142
```js {1,11}
142143
<div>
143-
<h1>Hedy Lamarr's Todos</h1>
144+
<h1>Daftar Tugas Putri</h1>
144145
<img
145146
src="https://i.imgur.com/yXOvdOSs.jpg"
146-
alt="Hedy Lamarr"
147+
alt="Putri"
147148
class="photo"
148149
>
149150
<ul>
@@ -153,14 +154,14 @@ For example, you can use a `<div>`:
153154
```
154155

155156

156-
If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
157+
Jika anda tidak ingin menambahkan `<div>` pada *markup*, anda dapat `<>` dan `</>` saja:
157158

158159
```js {1,11}
159160
<>
160-
<h1>Hedy Lamarr's Todos</h1>
161+
<h1>Daftar Tugas Putri</h1>
161162
<img
162163
src="https://i.imgur.com/yXOvdOSs.jpg"
163-
alt="Hedy Lamarr"
164+
alt="Putri"
164165
class="photo"
165166
>
166167
<ul>
@@ -169,81 +170,82 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
169170
</>
170171
```
171172

172-
This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
173+
*Tag* kosong di atas disebut *[Fragment.](/reference/react/Fragment)* *Fragments* dapat menggabungkan beberapa *tag* tanpa memasukkan *tag* tersebut ke bagian dari HTML.
173174

174175
<DeepDive>
175176

176-
#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
177+
#### Mengapa beberapa tag JSX perlu dibungkus? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
177178

178-
JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
179+
JSX mirip dengan HTML, namun di balik layar, mereka berubah menjadi objek *literal* JavaScript. Anda tidak bisa mengembalikan dua objek dari sebuah fungsi tanpa membungkus mereka ke sebuah senarai. Inilah mengapa anda juga tidak bisa mengembalikan dua *tag* JSX tanpa membungkus mereka menjadi sebuah *fragment*.
179180

180181
</DeepDive>
181182

182-
### 2. Close all the tags {/*2-close-all-the-tags*/}
183+
### 2. Tutup semua tag {/*2-close-all-the-tags*/}
183184

184-
JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
185+
Semua *tag* JSX harus dapat ditutup: *tag* tunggal seperti `<img>` harus ditulis `<img />`, dan *tag* ganda seperti `<li>oranges` harus ditulis `<li>oranges</li>`.
185186

186-
This is how Hedy Lamarr's image and list items look closed:
187+
Berikut adalah gambar dan daftar tugas Putri dengan *tag* ganda:
187188

188189
```js {2-6,8-10}
189190
<>
190191
<img
191192
src="https://i.imgur.com/yXOvdOSs.jpg"
192-
alt="Hedy Lamarr"
193+
alt="Putri"
193194
class="photo"
194195
/>
195196
<ul>
196-
<li>Invent new traffic lights</li>
197-
<li>Rehearse a movie scene</li>
198-
<li>Improve the spectrum technology</li>
197+
<li>Mengerjakan PR</li>
198+
<li>Pergi Belanja</li>
199+
<li>Minum vitamin</li>
199200
</ul>
200201
</>
201202
```
202203

203-
### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
204+
### 3. Ubah <s>semua</s> sebagian menjadi camelCase! {/*3-camelcase-salls-most-of-the-things*/}
204205

205-
JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
206+
JSX berubah menjadi JavaScript dan atribut yang dituis di JSX menjadi *key* pada objek di JavaScript. Dalam komponen, atribut akan lebih mudah dibaca sebagai *variable*. Namun JavaScript memiliki beberapa batasan dalam menamai *variable*. Contohnya, nama *variable* tidak boleh terdiri dari karakter minus dan tidak boleh menggunakan nama pesanan tertentu seperti `class`.
206207

207-
This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
208+
Inilah mengapa di React, banyak atribut HTML dan SVG ditulis secara camelCase. Contohnya, `stroke-width` dapat ditulis sebagai `strokeWidth`. Dan karena `class` merupakan nama pesanan, di React kita menulisnya sebagai `className`, dinamakan sesuai dengan [versi DOM-nya](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
208209

209210
```js {4}
210211
<img
211212
src="https://i.imgur.com/yXOvdOSs.jpg"
212-
alt="Hedy Lamarr"
213+
alt="Putri"
213214
className="photo"
214215
/>
215216
```
216217

217-
You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
218+
Anda dapat [mencari semua atribut pada list DOM component berikut.](/reference/react-dom/components/common) Jika ada yang salah, jangan takut—React akan menampilkan pesan dengan koreksi ke [konsol di peramban.](https://developer.mozilla.org/docs/Tools/Browser_Console)
218219

219220
<Pitfall>
220221

221-
For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
222+
Untuk beberapa alasan, atribut [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) dan [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) ditulis menggunakan tanda minus.
222223

223224
</Pitfall>
224225

225-
### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
226+
### Tip: Gunakan JSX Converter {/*pro-tip-use-a-jsx-converter*/}
226227

227-
Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
228+
Mengubah atribut di markup yang sudah ada bisa menjadi membosankan! Kami sarankan untuk menggunakan *[converter](https://transform.tools/html-to-jsx)* untuk mengubah HTML dan SVG-mu menjadi JSX.
229+
Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
228230

229-
Here is your final result:
231+
Berikut hasil jadinya:
230232

231233
<Sandpack>
232234

233235
```js
234236
export default function TodoList() {
235237
return (
236238
<>
237-
<h1>Hedy Lamarr's Todos</h1>
239+
<h1>Daftar Tugas Putri</h1>
238240
<img
239241
src="https://i.imgur.com/yXOvdOSs.jpg"
240-
alt="Hedy Lamarr"
242+
alt="Putri"
241243
className="photo"
242244
/>
243245
<ul>
244-
<li>Invent new traffic lights</li>
245-
<li>Rehearse a movie scene</li>
246-
<li>Improve the spectrum technology</li>
246+
<li>Mengerjakan PR</li>
247+
<li>Pergi Belanja</li>
248+
<li>Minum vitamin</li>
247249
</ul>
248250
</>
249251
);
@@ -258,34 +260,34 @@ img { height: 90px }
258260

259261
<Recap>
260262

261-
Now you know why JSX exists and how to use it in components:
263+
Sekarang anda paham mengapa ada JSX dan cara menggunakannya pada komponen:
262264

263-
* React components group rendering logic together with markup because they are related.
264-
* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
265-
* Error messages will often point you in the right direction to fixing your markup.
265+
* Komponen React menggabungkan logika *render* dengan *markup* karena mereka berkaitan.
266+
* JSX mirip dengan HTML, dengan beberapa perbedaan. Anda bisa menggunakan [converter](https://transform.tools/html-to-jsx) jika diperlukan.
267+
* Pesan error umumnya mengarahkan anda ke sumber masalah pada *markup*.
266268

267269
</Recap>
268270

269271

270272

271273
<Challenges>
272274

273-
#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
275+
#### Mengubah beberapa HTML menjadi JSX {/*convert-some-html-to-jsx*/}
274276

275-
This HTML was pasted into a component, but it's not valid JSX. Fix it:
277+
HTML berikut telah disalin ke sebuah komponen, tapi bukan JSX yang valid. Coba perbaiki:
276278

277279
<Sandpack>
278280

279281
```js
280282
export default function Bio() {
281283
return (
282284
<div class="intro">
283-
<h1>Welcome to my website!</h1>
285+
<h1>Selamat datang di website saya!</h1>
284286
</div>
285287
<p class="summary">
286-
You can find my thoughts here.
288+
Anda dapat membaca uneg-unegku di sini.
287289
<br><br>
288-
<b>And <i>pictures</b></i> of scientists!
290+
<b>Juga ada <i>foto</b></i> ilmuwan!
289291
</p>
290292
);
291293
}
@@ -308,7 +310,7 @@ export default function Bio() {
308310

309311
</Sandpack>
310312

311-
Whether to do it by hand or using the converter is up to you!
313+
Antara melakukannya dengan manual atau menggunakan *converter*, terserah Anda!
312314

313315
<Solution>
314316

@@ -319,12 +321,12 @@ export default function Bio() {
319321
return (
320322
<div>
321323
<div className="intro">
322-
<h1>Welcome to my website!</h1>
324+
<h1>Selamat datang di website saya!</h1>
323325
</div>
324326
<p className="summary">
325-
You can find my thoughts here.
327+
Anda dapat menemukan pemikiran saya di sini.
326328
<br /><br />
327-
<b>And <i>pictures</i></b> of scientists!
329+
<b>Juga ada <i>foto-foto</b></i>para ilmuwan!
328330
</p>
329331
</div>
330332
);

0 commit comments

Comments
 (0)