JSX

JSX (JavaScript XML) adalah sintaks extension untuk JavaScript yang memungkinkan developer menulis markup yang mirip HTML langsung di dalam kode JavaScript. JSX adalah sintactic sugar untuk React.createElement() — setiap tag JSX dikompilasi menjadi pemanggilan fungsi tersebut. JSX memudahkan visualisasi struktur UI karena markup dan logic berada di file yang sama. JSX bukan template engine — di dalam JSX bisa menulis JavaScript expression apa pun dengan curly braces {}. JSX harus punya satu root element (atau React Fragment <>). Attribute JSX menggunakan camelCase (className, onClick, htmlFor) bukan kebab-case. JSX harus di-transpile (Babel, SWC) sebelum bisa dijalankan browser.

Contoh Kode

// JSX di React
function UserCard({ user }) {
  return (
    <div className="card">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio || 'Tidak ada bio'}</p>
      <button onClick={() => follow(user.id)}>
        Follow
      </button>
    </div>
  );
}