JavaScript di JSX Menggunakan Kurung Kurawal

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.

Anda akan mempelajari

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

Mengoper string dengan tanda kutip

Ketika Anda ingin oper atribut string ke JSX, Anda memasukkannya ke dalam tanda kutip tunggal atau ganda:

export default function Avatar() { return ( <img className="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> ); }

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 `**:

export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( <img className="avatar" src={avatar} alt={description} /> ); }

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!

Menggunakan kurung kurawal: Jendela ke dunia JavaScript

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>:

export default function TodoList() { const name = 'Gregorio Y. Zara'; return ( <h1>{name}'s To Do List</h1> ); }

Coba ubah nilai name dari 'Gregorio Y. Zara' menjadi 'Hedy Lamarr'. Lihat bagaimana judul daftar berubah?

Setiap ekspresi JavaScript akan berfungsi di antara kurung kurawal, termasuk fungsi seperti formatDate():

Dimana menggunakan kurung kurawal?

Anda hanya dapat menggunakan kurung kurawal (curly braces) dalam dua cara di dalam JSX:

Sebagai teks langsung di dalam tag JSX: <h1>Daftar Tugas {name}</h1> berfungsi, tetapi <{tag}>Daftar Tugas Gregorio Y. Zara</{tag}> tidak akan berhasil.
Sebagai atribut yang segera mengikuti tanda dengan =: src={avatar} akan membaca variabel avatar, tetapi src="{avatar}" akan mengoper string "{avatar}".

Menggunakan “kurung kurawal ganda”: CSS dan objek lain di JSX

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 }}.

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:

export default function TodoList() { return ( <ul style={{ backgroundColor: 'black', color: 'pink' }}> <li>Improve the videophone</li> <li>Prepare aeronautics lectures</li> <li>Work on the alcohol-fuelled engine</li> </ul> ); }

Coba ubah nilai dari backgroundColor dan color.

Anda dapat melihat objek JavaScript di dalam kurung kurawal dengan jelas ketika Anda menulisnya seperti ini:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Ketika Anda melihat {{ dan }} di dalam JSX, Anda akan tahu bahwa itu tidak lebih dari objek di dalam kurung kurawal JSX!

Sandungan

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' }}>.

Lebih banyak kesenangan dengan objek JavaScript dan kurung kurawal

Anda dapat memasukkan beberapa ekspresi ke dalam satu objek, dan merujuk pada objek tersebut di dalam JSX menggunakan kurung kurawal. Sebagai contoh:

const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>{person.name}'s Todos</h1> <img className="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> <li>Improve the videophone</li> <li>Prepare aeronautics lectures</li> <li>Work on the alcohol-fuelled engine</li> </ul> </div> ); }

Pada contoh ini, objek JavaScript person berisi sebuah string name dan sebuah objek theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Komponen dapat menggunakan nilai-nilai dari objek person seperti ini:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX sangat sederhana sebagai bahasa templating karena memungkinkan Anda untuk mengorganisir data dan logika menggunakan JavaScript.

Rekap

Sekarang Anda hampir tahu segalanya tentang JSX:

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.

Coba tantangan berikut

Tantangan 1 dari 3:
Perbaiki Kesalahan

Kode ini mengalami crash dengan pesan galat yang menyatakan Objects are not valid as a React child:

const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>{person}'s Todos</h1> <img className="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> <li>Improve the videophone</li> <li>Prepare aeronautics lectures</li> <li>Work on the alcohol-fuelled engine</li> </ul> </div> ); }

Bisakah Anda menemukan masalahnya?

SebelumnyaMenulis Markup dengan JSX

SelanjutnyaMengoper Props ke Komponen