Sebelum mengenal lebih jauh, coba lihat deklarasi variable di bawah ini
const component = <p>Ini Component</p>Sintaks tag yang biasa kita pakai, ini bukanlah string atau HTML.
Itu disebut JSX, dan itu adalah ekstensi sintaksis ke JavaScript. Kami merekomendasikan untuk menggunakannya dengan React untuk menjelaskan seperti apa UI seharusnya. JSX mungkin mengingatkan Anda tentang bahasa template, tetapi JSX hadir dengan kekuatan penuh JavaScript.
JSX menghasilkan “elemen” React. React akan menjelajahi rendering ke DOM di bagian selanjutnya. Di bawah ini, Anda dapat menemukan dasar-dasar JSX yang diperlukan untuk memulai.
React menerima fakta bahwa logika rendering secara inherently digabungkan dengan logika UI lainnya: bagaimana peristiwa ditangani, bagaimana keadaan berubah dari waktu ke waktu, dan bagaimana data disiapkan untuk ditampilkan.
Alih-alih memisahkan teknologi secara artificially dengan menempatkan markup dan logika dalam file terpisah, React memisahkan masalah dengan unit yang digabungkan secara longgar yang disebut “komponen” yang mengandung keduanya.
Bereaksi tidak perlu menggunakan JSX, tetapi kebanyakan orang menganggapnya berguna sebagai bantuan visual saat bekerja dengan UI di dalam kode JavaScript. Ini juga memungkinkan React menampilkan pesan kesalahan dan peringatan yang lebih bermanfaat.
Dengan itu, mari kita mulai belajar!
Embedding Expressions in JSX
Mari kita coba contoh yang simple, kita mempunyai variable alamat yang akan di masukan ke dalam jsx:
const alamat = "Jawa Tengah";
const element = <p>Alamat saya ada di {alamat}</p>;kita juga dapat menambahkan fungsi-fungsi lain dari javascript, coba kita lihat contoh di bawah ini:
const dummyData = [
'Volvo',
'Toyota,
'Mitsubishi,
];
function findDataById (data = [], name) {
return data.filter((val) => val === name )
}
const element = <p>Mobil kesukaan saya {findDataById(dummyData, 'Toyota')}</p>Specifying Attributes with JSX
Di dalam JSX kita juga bisa menambahkan spesifik attribut yang sering kita gunakan di html dengan menggunakan tana ” / ‘, sebagai contoh link.
const element = <a href="https://google.co,">Google</a>Mungkin dapat kita simpulkan, Jsx hampir mirip dengan html biasa, tetapi ada di dalam javascript.
