Bereaksi BEJ

Apa itu BEJ?

JSX adalah singkatan dari JavaScript XML.

JSX memungkinkan kita untuk menulis HTML di React.

JSX membuatnya lebih mudah untuk menulis dan menambahkan HTML di React.

Pengkodean BEJ

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

JSX mengubah tag HTML menjadi elemen reaksi.

Berikut adalah dua contoh. Yang pertama menggunakan BEJ dan yang kedua tidak:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

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

ReactDOM.render(myelement, document.getElementById('root'));

Seperti yang Anda lihat pada contoh pertama, JSX memungkinkan kita untuk menulis HTML langsung di dalam kode JavaScript.

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

Ekspresi di BEJ

Dengan JSX Anda dapat menulis ekspresi di dalam kurung kurawal { }.

Ekspresi dapat berupa variabel React, atau properti, atau ekspresi JavaScript valid lainnya. JSX akan mengeksekusi ekspresi dan mengembalikan hasilnya:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Memasukkan Blok Besar HTML

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

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Satu Elemen Tingkat Atas

Kode HTML harus dibungkus dalam SATU elemen tingkat atas.

Jadi jika Anda ingin menulis dua paragraf, Anda harus meletakkannya di dalam elemen induk, seperti divelemen.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Atau, Anda dapat menggunakan "fragmen" untuk membungkus beberapa baris. Ini akan mencegah penambahan node tambahan yang tidak perlu ke DOM.

Fragmen terlihat seperti tag HTML kosong: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elemen Harus Ditutup

JSX mengikuti aturan XML, dan oleh karena itu elemen HTML harus ditutup dengan benar.

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

Kelas atribut = className

Atribut classadalah atribut yang banyak digunakan dalam HTML, tetapi karena JSX dirender sebagai JavaScript, dan classkata kunci adalah kata yang dicadangkan dalam JavaScript, Anda tidak diperbolehkan menggunakannya di BEJ.

JSX memecahkan ini dengan menggunakan classNamesebagai gantinya. Ketika JSX dirender, itu menerjemahkan className atribut menjadi classatribut.

const myelement = <h1 className="myclass">Hello World</h1>;

Kondisi - jika pernyataan

Bereaksi mendukung ifpernyataan, tetapi tidak di dalam JSX.

Untuk dapat menggunakan pernyataan bersyarat di BEJ, Anda harus meletakkan if pernyataan di luar BEJ, atau Anda dapat menggunakan ekspresi ternary sebagai gantinya:

Pilihan 1:

Tulis ifpernyataan di luar kode JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Pilihan 2:

Gunakan ekspresi ternary sebagai gantinya:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));