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.
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.
|
1 2 3 4 |
ReactDOM.render( <h2>Selamat datang ini tekno di reactjs</h2>, document.getElementById('container') ); |
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 :
|
1 2 3 |
<div> <p>assalamualaikum, initekno sedang belajar reactjs</p> </div> |
dan berikut kode untuk hasil yang sudah di kompilasi dalam react :
|
1 2 3 4 5 6 7 8 9 10 11 |
"use strict"; React.createElement( "div", null, React.createElement( "p", null, "assalamualaikum, initekno sedang belajar reactjs" ) ); |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> // disini kode jsx </script> </head> <body> <div id="container"> <!--disini isi dari konten kamu yang nanti akan di tangani jsx--> </div> </body> </html> |
Kemudian kita akan membuat komponen react menggunakan kode jsx seperti kode berikut ini:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/babel"> var Message = React.createClass({ render:function(){ return <h2>assalamualaikum, initekno sedang belajar reactjs</h2> } }); ReactDOM.render(<Message />,document.getElementById('main')); </script> |
Buat juga kode babel seperti berikut, kegunaan babel yaitu mengubah kode jsx menjadi fungsi react.
kode jsx
|
1 2 3 |
var grp = <div> <p>assalamualaikum, initekno sedang belajar reactjs</p> </div>; |
kode babel
|
1 2 3 4 5 6 7 8 9 |
var grp = React.createElement( "div", null, React.createElement( "p", null, "assalamualaikum, initekno sedang belajar reactjs" ) ); |
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
- Mulai Bekerja dengan version control Git
- Manfaat version control
- Mengerti apa itu JSX
- penerapan JSX dalam react
