Memahami apa itu React JSX

JSX adalah standar untuk javascript XML, JSX digunakan dalam React untuk memudahkan menuliskan HTML di dalam React dan javascript. Itu adalah ekstensi javascript yang memungkinkan untuk menggambarkan objek tree React menggunakan sintak yang menyerupai template HTML. Terlihat seperti markup dan akan mengembalikan dari komponen JSX membuat mudah untuk menulis atau membuat HTML dalam React. JSX dapat memudahkan convert HTML tags ke React elements. JSX mengizinkan untuk meletakkan HTML element dalam DOM tanpa menggunakan appendChild() atau createElement() method.

Apa perbedaan antara JS dan JSX
JS hanyalah bahasa scripting, menambahkan fungsionalitas ke situs web. JSX adalah tambahan untuk sintaks javascript yang merupakan campuran dari HTML dan javascript. Baik JS dan JSX dapat dipertukarkan tetapi JSX membuat kode lebih mudah dipahami oleh developer.

const element = <h1>Welcome to coder</h1>;

Code diatas Ini adalah taq JSX dan ini adalah React XML. Mungkin developer javascript melihat dan mencoba pertama kali akan merasa aneh kok bisa ya dengan model sintak seperti itu. Tetapi perasaan itu akan bertahan cepat. Karena React menyimpan file tersebut dalam satu file dan script yang menjadikan keanehan terasa biasa.

  class JSXDemo extends React.Component{
    render(){Return <h1>Welcome to Coder</h1>}
  }

Dengan JSX dalam menulis ekspresi harus didalam kurung kurawal { }. Ekspresi dapat berupa React variable, properti atau ekspresi javascript yang valid lainya.

  const name = 'coder';
  const myElement = <h1>Hello, Welcome to {name}</h1>
  Output: Hello, Welcome to coder

Dan yang menarik lagi adalah dapat menuliskan script multi lines dengan menambahkan "fragment". Fragment ini akan mencegah yang tidak perlu untuk menambahkan node tambahan ke DOM. Penggunaan fragment ada 2 cara yaitu dengan pemanggilan fragment dari properti React atau menuliskan empty tag HTML seperti ini, <> Contoh fragment

import fragment from "React";
const JSXDemo = () => {
  <Fragment>
    <h1>Title</h1>
  </Fragment>;
};

Contoh empty tag

const JSXDemo = () => {
  <>
    <h1>Title</h1>
  </>;
};

Element
JSX mengikuti aturan dari XML karena itu element html harus menjadi properti tertutup seperti contoh:

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

Attribute class = className
Dirender sebagai javascript dan keywod class adalah script yang tidak diizinkan didalam javascript menggunakan di JSX. Maka untuk memecahkan permasalah tersebut JSX menggunakan className sebagai gantinya.

Bagaimana JSX Compiled
Pada waktu pembuatan, JSX dikompilasi menjadi kode javascript yang tidak aktif. Saat runtime kode ini dimuat ke browser dan dieksekusi baik babel dan TypeScript dapat mengkompilasi JSX ke dalam javascript.