React JSX

Belajar React JS
Apa itu JSX?

JSX adalah singkatan dari JavaScript XML.

JSX memungkinkan kita untuk menulis HTML di React JS.

JSX membuat lebih mudah untuk menulis dan menambahkan HTML di React JS.

Kode JSX

JSX memungkinkan kita untuk menulis elemen HTML dalam JavaScript dan menempatkannya di DOM tanpa ada createElement()  dan atau metode appendChild().

JSX dapat mengubah tag HTML menjadi elemen React.

Kamu tidak harus menggunakan JSX, tetapi JSX dapat membuat lebih mudah untuk menulis aplikasi React.

Mari kita tunjukkan dengan dua contoh, yang pertama menggunakan JSX dan yang kedua tidakmenggunakan JSX:

Contoh 1

JSX:

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

Contoh 2

Tanpa JSX:

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

Seperti yang kamu lihat pada contoh pertama, JSX memungkinkan kamu untuk menulis HTML secara langsung dalam kode JavaScript.

JSX adalah perpanjangan dari bahasa JavaScript berdasarkan ES6, dan diterjemahkan ke dalam JavaScript reguler pada saat runtime.

Pernyataan di JSX

Dengan JSX, kamu dapat menulis pernyataan di dalam kurung kurawal { }.

Pernyataan dapat berupa variabel React, atau properti, atau pernyataan JavaScript lain yang valid. JSX akan menjalankan pernyataan dan mengembalikan hasilnya:

Contoh

Jalankan pernyataan  5 + 5:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;
Memasukkan Blok Besar ke HTML

Untuk menulis HTML pada beberapa baris, letakkan HTML di dalam tanda kurung:

Contoh

Membuat daftar dengan tiga item daftar:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);
Satu Elemen Tingkat Atas

Kode HTML harus dibungkus dengan SATU elemen tingkat atas.

Jadi, jika Kamu ingin menulis dua header, kamu harus meletakkannya di dalam elemen induk, seperti sebuah elemen div

Contoh

Bungkus dua header di dalam satu elemen DIV:

const myelement = (
  <div>
    <h1>I am a Header.</h1>
    <h1>I am a Header too.</h1>
  </div>
);

JSX akan menampilkan kesalahan jika HTML tidak benar, atau jika HTML melewatkan elemen induk.

Elemen Harus Ditutup

JSX mengikuti aturan XML, dan karenanya elemen HTML harus ditutup dengan benar.

Contoh

Tutup elemen kosong dengan />

const myelement = <input type="text" />;

JSX akan menampilkan kesalahan jika HTML tidak ditutup dengan benar.

No related posts.