Sabtu, 19 Desember 2020

Pengertian JSX dalam React JS

Singkatnya, JSX (Extended Javascript) merupakan pengimplementasian kode HTML ke suatu kode Javascript di React JS. 

Sekarang kita coba masuk ke file index.js pada folder src/

Penjelasan dari kodenya seperti ini:

const name = "Leja Aprianza";

const element = <h1> {getName()}!!</h1>;

function getName(){
  return "Halo " + name
}

ReactDOM.render(
  element,
  document.getElementById('master')
);

Perhatikan fungsi getName()! fungsi ini akan memanggil "Halo " dan string pada variabel name, yaitu Leja Aprianza

Itu masih menggunakan kode javascript normal, 

Perhatikan variabel element! variabel ini akan bertindak dalam memberikan kode HTML ke dalam kode HTML yang memiliki id 'master'.

masuk ke folder public kemudian ke file index.html

tuliskan ini di bawah script <body> :

<div id="master"></div>

Masih di variabel element, tetapi fokus pada const element, di sinilah fungsi getName(), dan kode HTML dimasukkan. Ini poin pentingya.

outputnya seperti ini pada browser:

Pengertian JSX dalam React JS

Terimakasih, jika ada pertanyaan, langsung saja tanya di kolom komentar...


EmoticonEmoticon