JSX (JavaScript XML — React)
JSX adalah ekstensi sintaks untuk JavaScript yang memungkinkan Anda menulis markup mirip HTML di dalam kode JavaScript. Ini adalah cara standar untuk mendefinisikan komponen UI di React, perpustakaan frontend paling populer.
Tipe MIME
text/jsx
Tipe
Teks
Kompresi
Lossless
Kelebihan
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Kekurangan
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
Kapan Menggunakan .JSX
Gunakan JSX untuk file komponen React; gunakan .tsx untuk React dengan TypeScript.
Detail Teknis
JSX bukan JavaScript yang valid — harus ditranspilasi (oleh Babel atau SWC) menjadi panggilan React.createElement() atau transformasi runtime JSX. Ekspresi JSX dapat menyertakan logika JavaScript dalam kurung kurawal.
Riwayat
Facebook memperkenalkan JSX pada tahun 2013 bersamaan dengan React. Awalnya kontroversial karena mencampur HTML dan JavaScript, JSX diterima secara luas dan sekarang digunakan oleh jutaan pengembang di React, Preact, dan SolidJS.