Memperkenalkan JSX

Cobalah lihat deklarasi variabel dibawah ini:

const element = <h1>Halo, Dunia!</h1>;

Sintaksis tag aneh ini bukanlah sebuah string ataupun HTML.

Sintaksis ini di kenal dengan sebutan JSX, dan sintaksis ini adalah sebuah sintaksis ekstensi untuk JavaScript. Kami sarankan menggunakannya dengan React untuk mendeskripsikan bagimana antarmuka pengguna seharusnya terlihat. JSX mungkin akan mengingatkan Anda dengan sebuah bahasa templat, bedanya adalah JSX telah dilengkapi dengan kekuatan penuh dari JavaScript.

JSX akan menghasilkan “elemen” React. Kita akan mulai mengeksplor bagaimana me-render mereka ke dalam DOM di bagian berikutnya. Di bawah ini, Anda akan menemukan dasar-dasar JSX yang Anda butuhkan untuk memulai.

Mengapa JSX?

React mengakui bahwa logika rendering akan secara inheren digabungkan dengan logika antarmuka pengguna lainnya. bagaimana events akan ditangani, bagaimana state berubah seiring dengan waktu, dan bagaimana data disiapkan untuk di tampilkan.

Alih-alih memisahkan technologies secara artifisial dengan meletakkan markup dan logika di file terpisah, React memisahkan kepentingan (separates concerns) dengan unit kopling rendah bernama “komponen” yang mengandung keduanya. Kita akan kembali ke komponen dalam bagian selanjutnya, tetapi jika Anda merasa belum nyaman menempatkan markup di JavaScript, video ini mungkin akan meyakinkan Anda.

React tidak mengharuskan Anda untuk menggunakan JSX, namun kebanyakan orang merasa terbantu dengan adanya JSX sebagai bantuan visual saat mengerjakan antarmuka pengguna di dalam kode JavaScript. Menggunakan JSX juga memungkinkan React untuk menampilkan pesan kesalahan (error) dan peringatan (warning) yang lebih bermanfaat.

Setelah Anda memahaminya, mari kita mulai!

Menyematkan Ekspresi di JSX

Dalam contoh di bawah ini, kita mendeklarasikan variabel bernama name dan kemudian menggunakannya di dalam JSX dengan cara membungkusnya di dalam tanda kurung kurawal (curly braces):

const name = 'Budi';const element = <h1>Halo, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Anda dapat menyematkan semua ekspresi JavaScript yang valid di dalam tanda kurung kurawal di JSX. Sebagai contoh, 2 + 2, user.firstName, atau formatName(user) adalah ekspresi JavaScript yang valid.

Pada contoh di bawah ini, kami menyematkan hasil memanggil fungsi JavaScript, formatName(user), kedalam elemen <h1>.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Budi',
  lastName: 'Mahardika'
};

const element = (
  <h1>
    Halo, {formatName(user)}!  </h1>
);

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

Coba di CodePen

Kami membagi JSX menjadi beberapa baris agar mudah dibaca. Meskipun tidak diwajibkan, ketika melakukan hal ini, kami juga merekomendasikan Anda membungkusnya dalam tanda kurung untuk menghindari terjadinya penyisipan titik koma otomatis.

JSX adalah Ekspresi Juga

Setelah dikompilasi, Ekspresi JSX akan menjadi panggilan fungsi JavaScript biasa dan menjadi objek JavaScript.

Hal ini berarti bahwa Anda dapat menggunakan JSX di dalam pernyataan if dan perulangan for, memasukkannya ke dalam variabel, menerimanya sebagai argumen, dan mengembalikannya dari sebuah fungsi:

function getGreeting(user) {
  if (user) {
    return <h1>Halo, {formatName(user)}!</h1>;  }
  return <h1>Halo, Orang Asing.</h1>;}

Menentukan Atribut dengan JSX

Anda dapat menggunakan tanda kutip untuk menentukan string literal sebagai atribut:

const element = <div tabIndex="0"></div>;

Anda juga dapat menggunakan kurung kurawal untuk menyematkan ekspresi JavaScript di dalam atribut:

const element = <img src={user.avatarUrl}></img>;

Jangan letakan tanda kutip di sekitar kurung kurawal saat menyematkan ekspresi JavaScript di dalam atribut. Anda bisa menggunakan tanda kutip (untuk nilai string) atau kurung kurawal (untuk ekspresi), tetapi jangan menggunakan keduanya dalam atribut yang sama.

Peringatan:

Karena JSX lebih dekat ke JavaScript daripada ke HTML, React DOM menggunakan camelCase sebagai konvensi penamaan alih-alih menggunakan konvensi penamaan atribut HTML.

Sebagai contoh, class akan menjadi className di JSX, dan tabindex akan menjadi tabIndex.

Menspesifikasikan Elemen Anak dengan JSX

Jika tag bersifat kosong (tidak memiliki elemen anak), Anda bisa saja menutupnya secara langsung dengan />, seperti XML:

const element = <img src={user.avatarUrl} />;

Tag JSX dimungkinkan untuk memiliki elemen anak:

const element = (
  <div>
    <h1>Halo!</h1>
    <h2>Senang melihatmu di sini.</h2>
  </div>
);

JSX Mencegah Serangan Injeksi

Anda dapat menanamkan input pengguna di JSX dengan aman:

const title = response.potentiallyMaliciousInput;
// Ini aman:
const element = <h1>{title}</h1>;

Secara default, React DOM meng-escape nilai apapun yang ditaruh di dalam JSX sebelum me-render mereka. Oleh karena itu dapat dipastikan Anda tidak akan pernah menginjeksi apapun yang tidak ditulis di aplikasi Anda secara eksplisit. Semuanya akan diubah menjadi string sebelum di-render. Ini membantu mencegah ada nya serangan XSS (skrip-lintas-situs).

JSX Merepresentasikan Objek

Babel akan meng-compile JSX menjadi pemanggilan React.createElement().

Dua contoh ini akan menghasilkan hal yang sama:

const element = (
  <h1 className="greeting">
    Halo, Dunia!
  </h1>
);

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

React.createElement() melakukan serangkaian pengecekan yang membantu Anda menulis kode yang bebas dari bug namun pada dasarnya akan membuat objek seperti ini:

// Catatan: struktur ini sudah disederhanakan
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Halo, Dunia!'
  }
};

Objek seperti ini disebut “elemen React”. Anda dapat menganggap mereka sebagai deskripsi dari apa yang Anda ingin lihat di layar. React membaca objek-objek ini dan menggunakan mereka untuk membangun DOM dan membuatnya tetap sesuai dengan kondisi saat ini.

Kita akan mengeksplorasi rendering pada elemen React ke DOM dalam bagian berikutnya.

Saran:

Kami merokemendasikan Anda untuk mencari skema sintaksis “Babel” untuk editor pilihan Anda sehingga baik kode ES6 dan JSX bisa di-highlight dengan benar.