docs: translate JavaScript in JSX with Curly Braces (#534)

Co-authored-by: Naufaldi Rafif S <naufaldi.rafif@efishery.com>
Co-authored-by: Irfan Maulana <mazipanneh@gmail.com>
Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com>

Author: 4 people

src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -1,25 +1,25 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: JavaScript di JSX Menggunakan Kurung Kurawal
 ---
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX memungkinkan Anda menulis markup mirip HTML di dalam file JavaScript, sehingga membuat logika rendering dan konten berada pada satu tempat yang sama. Terkadang Anda akan ingin menambahkan sedikit logika JavaScript atau merujuk pada properti yang dinamis di dalam markup tersebut. Dalam situasi ini, Anda dapat menggunakan tanda kurung kurawal pada JSX untuk membuka akses ke JavaScript.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* Bagaimana cara mengoper *string* dengan tanda kutip
+* Bagaimana cara mereferensikan variabel didalam JSX dengan kurung kurawal
+* Bagaimana cara memanggil fungsi Javascript didalam JSX dengan kurung kurawal
+* Bagaimana cara menggunakan objek Javascript didalam JSX dengan kurung kurawal
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## Mengoper string dengan tanda kutip {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+Ketika Anda ingin oper atribut *string* ke JSX, Anda memasukkannya ke dalam tanda kutip tunggal atau ganda:
 
 <Sandpack>
 
@@ -41,9 +41,10 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+Di sini, `"https://i.imgur.com/7vQD0fPs.jpg"` dan `"Gregorio Y. Zara"` sedang dioper sebagai *string*.
+
+Namun bagaimana jika Anda ingin secara dinamis menentukan teks `src` atau `alt? Anda dapat **menggunakan nilai dari JavaScript dengan mengganti `"` dan `"` dengan `{` dan `}`**:
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
 
 <Sandpack>
 
@@ -67,11 +68,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+Perhatikan perbedaan antara `className="avatar"`, yang menentukan nama kelas CSS `"avatar"` yang membuat gambar bulat, dan `src={avatar}` yang membaca nilai variabel JavaScript disebut `avatar`. Hal itu terjadi karena kurung kurawal memungkinkan Anda bekerja dengan JavaScript langsung di markup Anda!
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## Menggunakan kurung kurawal: Jendela ke dunia JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX merupakan cara khusus dalam menulis JavaScript. Artinya, memungkinkan untuk menggunakan JavaScript di dalamnya - dengan kurung kurawal `{ }`. Contohnya di bawah ini pertama-tama mendeklarasikan sebuah nama untuk ilmuwan, `name`, kemudian menyematkannya dengan kurung kurawal di dalam `<h1>`:
 
 <Sandpack>
 
@@ -86,9 +87,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes?
+Coba ubah nilai `name` dari `'Gregorio Y. Zara'` menjadi `'Hedy Lamarr'`. Lihat bagaimana judul daftar berubah?
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+Setiap ekspresi JavaScript akan berfungsi di antara kurung kurawal, termasuk fungsi seperti  `formatDate()`:
 
 <Sandpack>
 
@@ -111,18 +112,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### Dimana menggunakan kurung kurawal? {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+Anda hanya dapat menggunakan kurung kurawal (curly braces) dalam dua cara di dalam JSX:
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+1. **Sebagai teks** langsung di dalam tag JSX: `<h1>Daftar Tugas {name}</h1>` berfungsi, tetapi `<{tag}>Daftar Tugas Gregorio Y. Zara</{tag}>` tidak akan berhasil.
+2. **Sebagai atribut** yang segera mengikuti tanda dengan `=`: `src={avatar}` akan membaca variabel `avatar`, tetapi `src="{avatar}"` akan mengoper string `"{avatar}"`.
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## Menggunakan "kurung kurawal ganda": CSS dan objek lain di JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+Selain string, angka, dan ekspresi JavaScript lainnya, Anda bahkan dapat mengoper objek dalam JSX. Objek juga ditandai dengan kurung kurawal, seperti `{ name: "Hedy Lamarr", inventions: 5 }`. Oleh karena itu, untuk mengoper objek JavaScript di JSX, Anda harus membungkus objek tersebut dalam sepasang kurung kurawal lainnya: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+Anda mungkin melihat ini pada gaya CSS *inline* dalam JSX. React tidak mengharuskan Anda untuk menggunakan gaya *inline* (kelas CSS berfungsi lebih baik untuk kebanyakan kasus). Namun, ketika Anda membutuhkan gaya *inline*, Anda dapat mengoper objek ke atribut `style`:
 
 <Sandpack>
 
@@ -148,9 +149,10 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+Coba ubah nilai dari `backgroundColor` dan `color`.
+
+Anda dapat melihat objek JavaScript di dalam kurung kurawal dengan jelas ketika Anda menulisnya seperti ini:
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
 
 ```js {2-5}
 <ul style={
@@ -161,17 +163,18 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+Ketika Anda melihat `{{` dan `}}` di dalam JSX, Anda akan tahu bahwa itu tidak lebih dari objek di dalam kurung kurawal JSX!
+
 
 <Pitfall>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+Properti `style` dalam bentuk *inline* ditulis menggunakan gaya *camelCase* di dalam JSX. Sebagai contoh, jika pada HTML Anda menuliskan `<ul style="background-color: black">`, maka pada komponen React Anda harus menulisnya sebagai `<ul style={{ backgroundColor: 'black' }}>`.
 
 </Pitfall>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## Lebih banyak kesenangan dengan objek JavaScript dan kurung kurawal {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+Anda dapat memasukkan beberapa ekspresi ke dalam satu objek, dan merujuk pada objek tersebut di dalam JSX menggunakan kurung kurawal. Sebagai contoh:
 
 <Sandpack>
 
@@ -211,7 +214,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+Pada contoh ini, objek JavaScript `person` berisi sebuah string `name` dan sebuah objek `theme`:
 
 ```js
 const person = {
@@ -223,31 +226,32 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+Komponen dapat menggunakan nilai-nilai dari objek `person` seperti ini:
+
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX sangat sederhana sebagai bahasa templating karena memungkinkan Anda untuk mengorganisir data dan logika menggunakan JavaScript.
 
 <Recap>
 
-Now you know almost everything about JSX:
+Sekarang Anda hampir tahu segalanya tentang JSX:
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* Atribut JSX di dalam tanda kutip dianggap sebagai string.
+* Kurung kurawal memungkinkan Anda membawa logika JavaScript dan variabel ke dalam markup.
+* Kurung kurawal berfungsi di dalam konten tag JSX atau segera setelah `=` pada atribut.
+* `{{` dan `}}` bukanlah sintaks khusus: itu adalah objek JavaScript yang tersembunyi di dalam kurung kurawal JSX.
 
 </Recap>
 
 <Challenges>
 
-#### Fix the mistake {/*fix-the-mistake*/}
+#### Perbaiki Kesalahan {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+Kode ini mengalami *crash* dengan pesan galat yang menyatakan `Objects are not valid as a React child`:
 
 <Sandpack>
 
@@ -287,15 +291,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+Bisakah Anda menemukan masalahnya?
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>Periksa apa yang ada di dalam kurung kurawal. Apakah kita meletakkan sesuatu yang benar di sana?</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+Ini terjadi karena contoh ini me-*render* *objek itu sendiri* ke dalam markup bukan string: `<h1>{person}'s Todos</h1>` mencoba *render* seluruh objek `person`! Menyertakan objek mentah sebagai konten teks menghasilkan kesalahan karena React tidak tahu bagaimana Anda ingin menampilkannya.
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+Untuk memperbaikinya, ganti `<h1>{person}'s Todos</h1>` dengan `<h1>{person.name}'s Todos</h1>`:
 
 <Sandpack>
 
@@ -337,9 +341,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Extract information into an object {/*extract-information-into-an-object*/}
+#### Ekstrak informasi ke dalam sebuah objek {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+Ekstrak URL gambar ke dalam objek `person`.
 
 <Sandpack>
 
@@ -381,7 +385,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+Pindahkan URL gambar ke dalam properti yang disebut `person.imageUrl` dan baca dari tag `<img>` menggunakan kurung kurawal:
 
 <Sandpack>
 
@@ -424,13 +428,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+#### Menulis ekspresi di dalam kurung kurawal JSX {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+Pada objek di bawah ini, URL lengkap gambar dibagi menjadi empat bagian: URL dasar, `imageId`, `imageSize`, dan ekstensi file.
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+Kita ingin URL gambar menggabungkan atribut-atribut ini bersama-sama: URL dasar (selalu `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), dan ekstensi file (selalu `'.jpg'`). Namun, ada yang salah dengan bagaimana tag `<img>` menentukan `src`.
 
-Can you fix it?
+Bisakah anda memperbaikinya?
 
 <Sandpack>
 
@@ -474,15 +478,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+Untuk memeriksa apakah perbaikan Anda berhasil, coba ubah nilai dari `imageSize` menjadi `'b'`. Gambar harus menyesuaikan ukuran setelah diubah.
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+Anda bisa menuliskannya seperti ini `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` membuka ekspresi JavaScript
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` menghasilkan string URL yang benar
+3. `}` menutup ekspresi JavaScript.
 
 <Sandpack>
 
@@ -525,7 +529,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+Anda juga dapat memindahkan ekspresi ini ke fungsi terpisah seperti `getImageUrl` di bawah ini.
 
 <Sandpack>
 
@@ -580,7 +584,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+Variabel dan fungsi dapat membantu Anda menjaga markup tetap sederhana!
 
 </Solution>