Apa itu JSX?

JSX (JavaScript XML) adalah ekstensi sintaks untuk JavaScript yang digunakan dengan React untuk menggambarkan seperti apa UI seharusnya terlihat. JSX memungkinkan Anda untuk menulis kode yang mirip dengan HTML di dalam file JavaScript. Meskipun terlihat seperti HTML, JSX sebenarnya adalah sintaks yang akan dikompilasi menjadi panggilan fungsi JavaScript.

Fitur Utama JSX:

  1. Ekspresif: JSX memungkinkan Anda menulis elemen UI dengan sintaks yang mirip HTML, membuat kode lebih mudah dibaca dan dipahami.

  2. Interoperabilitas dengan JavaScript: Anda dapat menyematkan ekspresi JavaScript dalam JSX menggunakan tanda kurung kurawal {}.

  3. Bersifat Deklaratif: JSX mendeklarasikan apa yang ingin Anda tampilkan di UI, bukan bagaimana cara menampilkannya.

Perbandingan: JSX vs JavaScript Murni

Tanpa JSX

Berikut adalah contoh komponen React yang ditulis tanpa JSX:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

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

Dengan JSX

Berikut adalah contoh yang sama ditulis dengan JSX:

const element = <h1 className="greeting">Hello, world!</h1>;

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

Contoh Lengkap dengan JSX

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX Example</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const App = () => {
  const name = 'World';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a paragraph with JSX.</p>
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Penjelasan Kode

  1. HTML:

    • div#root: Elemen tempat React akan merender komponen.

  2. JavaScript:

    • Tanpa JSX: Menggunakan React.createElement untuk membuat elemen React.

    • Dengan JSX: Menggunakan sintaks mirip HTML yang dikompilasi menjadi panggilan React.createElement di balik layar.

    • App Component: Komponen fungsi yang menggunakan JSX untuk mendeklarasikan UI.

    • ReactDOM.render: Merender komponen App ke dalam elemen div#root.

Sumber

JSX membuat kode React lebih mudah ditulis dan dipahami dengan memungkinkan Anda menulis elemen UI menggunakan sintaks yang mirip dengan HTML. Ini adalah fitur yang sangat berguna dan banyak digunakan dalam pengembangan aplikasi React.

PreviousKonsep Virtual DOMNextLangkah-langkah Setup Project React.js

Last updated