Mengenal JSX pada React JS #2

Pendahuluan

JSX atau bisa dibilang Extended Javascript ini adalah suatu pengembangan dari suatu bahasa javascript dimana kode html bisa di ikut kan dalam javascript dan dalam kali ini kita akan membuat seperti ini..

Dengan gambar diatas kita akan menampilkan data yang berada disamping gambar tersebut dengan elemen HTML sebagai penerapan JSX pada framework atau library React Javascript..

Alat & Bahan

Code Editor
React JS

Langkah-langkah

Yang pertama kita lakukan adalah menyiapkan framework React js nya kalian bisa mengikuti tutorial React JS sebelum ini untuk menginstall React JS nya klik
Jika sudah Silakan ketikkan script seperti dibawah ini dulu
Script diatas yang pertama kita lakukan adalah mengimport react dari library react dan menghubungkan file App.js nya kepada css yaitu App.css. Lalu kita membuat function yang didalam nya kita membuat elemen HTML dan dielemen HTML tersebut kita akan membuat tag Foto Produk dan Produk info 2 tag tersebut kita panggil dari function yang nanti akan kita buat jadi kita membuat elemen-elemen HTML tersebut dengan satu per satu
Lalu ketikkan script seperti ini lagi...
Script diatas kita akan membuat function yang diakses pada function App tadi yaitu tag fotoproduk jadi di function ini kita mengisi kan function tersebut dengan menambahkan elemen untuk menampilkan gambar.. Lalu kita juga membuat function yang bernama cek diskon yang berfungsi untuk menampilkan diskon yang ada di di function produk info, jadi disini kita juga membuat pengkondisian seperti script diatas
Lalu ketikkan script seperti ini..
Script diatas kita membuat function yang akan berisikan elemen yang menampilkan produk info tersebut dan pada tag a tambah chart kita menambahkan sebuah alert jika mouse berada pada button tersebut akan muncul alert.
Dan yang terakhir silakan kalian ketikkan css yang berada pada file App.css seperti ini..
Dan tampil seperti ini..