Pentingnya JSX Dalam Membangun Aplikasi React

Sebagai Developer yang bergerak dalam bidang teknologi, kita pasti menggunakan berbagai Tools dan Code yang bersifat Open Sourceguna memudahkan pekerjaan kita.

Salah satu teknologi yang mungkin sudah kamu gunakan adalah JSX – ekstensi sintaksis mirip seperti XML tetapi untuk JavaScript.

Dibuat oleh tim di Facebook dengan tujuan untuk menyederhanakan Developer dalam membangun program atau aplikasi. Menurut Ahli JSX, alasan untuk membuat JSX adalah:

“… untuk mendefinisikan sintaksis secara ringkas dan mudah dikenali untuk mendefinisikan pohon struktur dengan atribut.” – JSX Expert

Baca Juga :

Contohnya :

const halloDunia = <h1>Hallo dunia!</h1>;

Jika kamu seorang developer website, cuplikan code diatas pasti sangat familiar dimata kamu. Ya.. Sangat mirip dengan HTML maupun CSS. Mengapa demikian ? karena memang pada dasarnya JSX (Javascript XML) merupakan salah satu dari 3 pillar utama dalam membangun website.

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>Hallo Dunia!</h1>}

Di belakang layar, setiap elemen yang dirender oleh komponen Hallo diubah menjadi perintah React.createElement.

Baca Juga Artikel Menarik Lainnya :

function Hello() { return React.createElement(“h1”, {}, “Hallo Dunia!”)}

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>About</li>

<li>Portfolio</li>

<li>Contact</li>

</ul> );

}

Baca Juga : 5 menit Saja! Cara Install React Native di Sistem Operasi Windows

Belajar React js Terbaru

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

Baca Juga : 8 Rahasia Windows 10 yang Belum Diketahui Semua Orang!

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.

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

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

Baca Juga :

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.

Mengapa Harus Menggunakan JSX ?

React mengakui bahwa logika rendering akan secara inherent digabungkan dengan logika User Interface lainnya. bagaimana events akan ditangani, bagaimana state berubah seiring dengan waktu, dan bagaimana data disiapkan untuk di tampilkan.

React memisahkan kepentingan (separates concerns) dengan unit bernama “komponen” yang mengandung keduanya. React tidak mengharuskan Anda untuk menggunakan JSX, namun kebanyakan orang merasa terbantu dengan adanya JSX sebagai bantuan visual saat mengerjakan User Interface di dalam kode JavaScript.

Menggunakan JSX juga memungkinkan React untuk menampilkan pesan kesalahan (error) dan peringatan (warning) yang lebih bermanfaat.