Pentingnya JSX Dalam Membangun Aplikasi React
Pengertian JSX
JSX atau bisa kita bilang extended
javascript adalah suatu pengembangan javascript dimana kode HTML bisa di ikut
sertakan dalam javascript.
Hal pertama yang perlu diperhatikan ketika
menggunakan sintaks JSX adalah bahwa React harus dalam ruang lingkupnya
berdasarkan cara kompilasi JSX. Misalnya :
function Hello() {
return <h1>HELLO WORLD</h1>
}
Di belakang layar, setiap elemen yang
dirender oleh komponen Hallo diubah menjadi perintah React.createElement.
function Hello() {
return React.createElement(“h1”, {}, “>HELLO WORLD”)
}
Hal yang sama berlaku
untuk Nested Element. Pada contoh di bawah ini pada akhirnya akan memberikan
markup yang sama.
//
Contoh 1: menggunakan Sintak Function JSX
function Nav(){
return (
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul> );
}
//
Contoh 2: Tidak Menggunakan Sintak Function JSX
function Nav(){
return (
React.createElement(
“ul”,{},
React.createElement(“li”, null, “Home”),
React.createElement(“li”, null, “About”),
React.createElement(“li”, null, “Portfolio”),
React.createElement(“li”, null, “Contact”)));
}
React.createElement
Ketika React menciptakan
elemen, ia memanggil metode ini, yang membutuhkan tiga argumen, antara lain :
·
Nama element
·
Objek yang mewakili property element
·
Array child element
Satu hal yang
perlu diperhatikan di sini adalah bahwa React menafsirkan elemen huruf kecil
sebagai HTML dan kasus Pascal (mis. ThisIsPascalCase) elemen sebagai komponen
kustom. Karena itu, contoh-contoh berikut akan ditafsirkan berbeda.
// HTML ElementReact.createElement("div", null, "Some content
text here")
// React ElementReact.createElement("Div", null, "Some content
text here")
Pada Contoh pertama akan menghasilkan <div> dengan string “Some Content Text Here” sebagai child nya.
Namun pada contoh kedua akan menyebabkan error karena <div> pada code nya belum di
definisikan.
Props di dalam JSX
Ketika membangun aplikasi dengan React, komponen
kamu sering membuat child dalam
suatu parent container dan perlu memberikan data mereka
agar komponen child dimuat dengan
benar. Inilah yang disebut Props pada JSX
// 1. Props defaulted to true < user loggedIn />
//
2. String literals < user name = " belajar " />
// 3. JavaScript expressions < user balance = { 5 + 5 + 10 } />
// 4. Spread attributes < user preferences = { ...this.state } />
Element Child di dalam JSX
Ketika kamu membangun aplikasi, element
didalamnya (parent) tentunya tidak lepas dari element child. Element Child itu sendiri
merupakan baris code yang berada di dalam suatu container yang disebut parent
Karena JSX
dimaksudkan untuk memudahkan kita untuk berpikir tentang struktur elemen
layaknya seperti pohon, itu membuat semua ini sangat mudah. Pada dasarnya,
elemen apa pun yang dikembalikan komponen menjadi child nya.
Ada empat cara untuk merender elemen child
menggunakan JSX:
React.Children.forEach
React.Children.forEach(children,
function[(thisArg)])
Mirip dengan React.Children.map() namun tidak
mengembalikan list nya.
React.Children.count
React.Children.count(children)
Mengembalikan jumlah total komponen yang berada
di dalam children, jumlah total yang dihasilkan sama dengan berapa kali sebuah
callback yang dioper ke map atau forEach akan dijalankan.
React.Children.only
React.Children.only(children)
Memeriksa apakah children yang diberikan hanya
memiliki satu child (elemen React) dan mengembalikannya. Jika tidak method ini
akan melempar error.
Catatan:
React.Children.only() mengembalikan nilai yang
berbeda dengan React.Children.map() karena React.Children.map() mengembalikan
senarai dan bukan elemen React.
React.Children.toArray
React.Children.toArray(children)
Mengembalikan struktur data children sebagai list
datar dengan key yang diberikan pada setiap child. Sangat berguna apabila Anda
ingin memanipulasi kumpulan children pada method render Anda, terutama apabila
Anda ingin mengurutkan atau memotong this.props.children sebelum menurunkannya.