Mengenal JSX

React adalah library JavaScript yang deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. Tetapi alih-alih menggunakan JavaScript biasa, kode React harus ditulis dalam sesuatu yang disebut JSX. 

Mari kita lihat contoh kode JSX: 

const ele = <h1> Ini adalah contoh JSX </h1>;

Potongan kode di atas agak terlihat seperti HTML dan juga menggunakan variabel seperti JavaScript tetapi bukan HTML atau JavaScript, ini adalah JSX. JSX pada dasarnya adalah ekstensi sintaks dari JavaScript biasa dan digunakan untuk membuat elemen React. Elemen-elemen ini kemudian dirender ke React DOM.

Mengapa JSX?

• Lebih cepat daripada JavaScript normal karena melakukan pengoptimalan saat menerjemahkan ke JavaScript biasa.
• Memudahkan kita dalam membuat template.
• Alih-alih memisahkan markup dan logika dalam file terpisah, React menggunakan component untuk tujuan ini.

Menggunakan ekspresi JavaScript di JSX: Di React kita diizinkan untuk menggunakan ekspresi JavaScript normal dengan JSX. Untuk menyematkan ekspresi JavaScript apa pun dalam potongan kode yang ditulis dalam JSX kita harus membungkus ekspresi itu dalam tanda kurung kurawal {}. Pertimbangkan program di bawah ini, yang ditulis di file index.js : 

import React from 'react';
import ReactDOM from 'react-dom';
 
const name = "Learner";
 
const element = Hello, { name }.Welcome to GeeksforGeeks.< /h1>; ReactDOM.render( element, document.getElementById("root") );