Tutorial ReactJS Bagian3 : Menggunakan JSX Pada React

Initekno.com – Kembali lagi di tutorial reactjs masih di situs initekno.com situs pemrograman anak bangsa. Ok gays.. kali ini kita akan menggunakan extension javascript yang sudah sangat terkenal sekali, dan ini biasanya di gunakan di react.

Tapi sebelumnya perlu kamu tahu terlebih dahulu, untuk mengikuti tutorial ini silahkan baca tutorial react di bagian sebelumnya yaitu bagian2.

Tutorial ReactJS Bagian2 : Membuat Tulisan Halo Dunia

Bekerja Dengan Version Control

Kode program yang selama ini kamu tulis ternyata bisa di simpan secara rapih dengan menggunakan version control. version control yang akan kita gunakan kali ini adalah bitbucket. Bitbucket adalah version control kesukaan saya. Silahkan baca artikel penggunaan bitbucket di link berikut ini:

Belajar Version Control System Adalah Jutsu Wajib Programer Milenial #Bagian2

Apa Itu JSX

JSX bisa di katakan sebuah extension javascript dimana didalamnya terdapat kode-kode HTML yang itu memang sengaja di tanamkan di kode javascript. hayo pusing gak tuh bikinnya..hehehe

Contoh Penggunaan Dasar

Baiklah, langsung saja tuliskan beberapa contoh penggunaan jsx pada project react kita.

jadi gini, dari kode diatas tersebut kamu tulisan didalam h2 akan di render oleh jsx dan di masukkan ke dalam element container. Dan perlu kamu ketahui bahwa penggunaan jsx lebih mudahdari pada menggunakan javascript biasa.

Contoh sederhana dengan jsx :

dan berikut kode untuk hasil yang sudah di kompilasi dalam react :

jsx akan berjalan lebih cepat ketimbang menggunakan javascript dan jsx aka memastikan bahwa mudah dibaca oleh programer lain dan mudah dikelola jika sistem yang kamu buat sudah mempunyai banyak fitur.

Kali ini saya akan mencoba contoh lain penggunaan jsx yaitu mencoba membuat agar browser merender kode jsx yang kamu buat. maka dari itu kamu perlu untuk membuat satu file yaitu file index.php dan ketiikan kode seperti berikut ini :

Kemudian kita akan membuat komponen react menggunakan kode  jsx seperti kode berikut ini:

Buat juga kode babel seperti berikut, kegunaan babel yaitu mengubah kode jsx menjadi fungsi react.

kode jsx

kode babel

Simpan semua kode diatas, dan kemudian jalankan pada browser chrome atau firefox yang kamu punya. Maka hasilnya akan menampilkan tulisan “assalamualaikum, initekno sedang belajar reactjs“.

Kesimpulan

Saatnya masuk kesimpulan, bahwa setidaknya setelah mempelajari tutorial ini kamu bisa menerapkan jsx dalam react. Dapat membedakan jsx dan kode javascript biasa. Mengetahui dasar dasar jsx dan pengertian dari jsx. sekian tutorial ini dan silahkan ikuti terus artikel kelanjutannya di initekno.com

Ringkasan Tutorial

  1. Mulai Bekerja dengan version control Git
  2. Manfaat version control
  3. Mengerti apa itu JSX
  4. penerapan JSX dalam react

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *