Javascript React: JSX

 Assalamualaikum wr wb. Halo guys kembali lagi dengan saya Haikal. Kali ini saya akan sharing materi tenetang JSX. Apa sih itu JSX dan lain-lain. Check it out.

JSX

 

Javascript XML atau disingkat JSX merupakan salah satu fitur react yang memungkinkan kita menuliskan HTML didalam javascript (wow). Dengan begitu, ini memudahkan kita untuk menulis dan menambahkan elemen HTML di react.

Dengan JSX kita dapat mudah membuat elemen HTML tanpat createElement() dan appendChild().

JSX mengkonversikan HTML Tags ke react element.

Berikut kode dengan JSX:

const myelement = <h1>I Love JSX!</h1>; ReactDOM.render(myelement, document.getElementById('root'));

Tanpa JSX:

const myelement = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(myelement, document.getElementById('root'));

Bisa kalian lihat, kode yang menggunakan JSX lebih simpel dan rapi.

Expression di JSX

Kalian juga dapat menggunakan experssion didalam JSX dengan menggunakan curly brackets {}. Misal kita ingin menambahkan hasil 5 + 5 didalam {}.

const myelement = <h1>React is {5 + 5} times better with JSX</h1>; ReactDOM.render(myelement, document.getElementById('root'));

Ia akan dirender dan dikompilasi oleh runtime javascript dan hasilnya ditampilkan dalam webpage.

Kita juga dapat memasukkan tidak hanya satu tag HTML tapi banyak tag HTML yang dibungkus dalam <div> tag.

seperti ini:

const myelement = ( <div> <h1>Title</h1> <p>Description</p> <ul> <li>List</li> </ul> </div> ); ReactDOM.render(myelement, document.getElementById('root'));

Jangan lupa gunakan parenthesses () jika kode tersebut multiline.

Gimana? mudah sekali kan menggunakan JSX? JSX sangat berguna dan digunakan dalam aplikasi react ini. Jadi pastikan kalian menguasainya...

Mungkin sekian saja untuk kali ini. Mohon maaf bila ada kesalahan. Wassalamualaikum wr wb.