lifelong learner — urip iku urup, currently working on accenture.

React – JSX, variable, expression

0
Degananda.com -

JSX merupakan kependekan dari javascript syntax extension. Merupakan syntax yang digunakan oleh react sehingga kita dapat menuliskan HTML/XML (bukan murni html tetapi sesuatu yang mirip “html”) pada react. JSX ini juga mensupport beberapa fitur yang ada pada Ecmascript2015 atau ES6. Sehingga penulisan kode lebih sedikit dan efisien. JSX dan kode Ecmascript akan ditransformasi oleh babel untuk dikonversi menjadi kode javascript yang sebenarnya (standar kode javascript). Dengan menggunakan JSX penulisan elemen-elemen react akan menjadi sangat mudah.

Pada JSX kita menuliskan layaknya kode html seperti biasannya. Hanya saja kita dapat menambahkan seperti javascript expression, mengakses fungsi, mengakses property dan lain sebagainnya melalui JSX. Nantinnya kode JSX ini akan ditransformasikan oleh babel menjadi kode standar javascript. Contoh dari syntax JSX adalah

const element = (
  <h1>
    Hello dunia
  </h1>
);

yang perlu di ingat JSX bukanlah HTML biasa karena kita dapat mengakses fungsi, variabel dan lain sebagainya melalaui JSX. Kode diatas akan diterjemahkan oleh babel menjadi seperti dibawah ini

const element = React.createElement(
  'h1',
  'Hello dunia'
);

React akan membuat elemen pada virtual DOM dengan menggunakan React.CreateElement. sehingga dapat kita katakan bahwa jsx seperti suatu template yang mengakomodasi antara html dan fungsi-fungsi javacript guna mempermudah kita dalam membuat aplikasi.

Bagi beberapa orang menuliskan html pada javascript bukanlah suatu hal yang lumrah. Namun, pada react hal ini menjadi suatu keharusan karena react menggunakan jsx. Mudahnya , kita dapat menyimpulkan bahwa JSX merupakan penulisan singkat dari penggunaan fungsi React.CreateElement.

Variabel

Terdapat beberapa cara untuk membuat variabel pada React. yang pertama adalah pada property dari suatu class. Kedua pada suatu fungsi tertentu. Kedua cara tersebut tentunnya memiliki fungsi masing-masing. Membuat variabel pada class property berarti membuat variabel tersebut dapat diakses diseluruh class. Sedangkan membuat variabel pada suatu fungsi tertentu membuat variabel tersebut hanya dapat diakses pada fungsi tersebut. Berikut adalah kode untuk membuat variabel dengan cara pertama dan kedua

  nama = 'degananda ferdian';
  hobi = 'memancing';

  render() {
    // return react element
    const nama = "degananda";
    const myImage = "https://degananda.com/wp-content/uploads/2017/06/cropped-logo.png";
  }

untuk mengakses nilai variabel kita dapat mengaksesnya melalui JSX ataupun dijadikan sebagai expression(layaknya pada javascript seperti umumnya). Contoh mengakses variabel melalui JSX


<div>
 akses variabel pada class/property : {this.nama} 
 akses variabel pada fungsi : {nama} 
</div>

contoh mengakses variabel melalui expression.

writeMyName(nama){
    return 'nama saya adalah : ' + nama;
}

fungsi diatas jika dituliskan melalui jsx maka penulisannya adalah


<div>
    jsx pada expression : {this.writeMyHobby(this.nama)} 
</div>

Membuat object

untuk membuat suatu object dapat dilakukan seperti layaknya membuat object pada javascript biasa. Contoh object pada react adalah

const myObject = {
 nama : 'degananda',
 email : 'degananda.ferdian@gmail.com'
}

untuk mengakses nilai dari object diatas contohnya adalah myObject.nama maka akan menghasilkan nilai “degananda” dan myObject.email akan menghasilkan nilai “degananda.ferdian@gmail.com”.

Element

untuk membuat element jsx kode yang digunakan adalah

const myElement = (
 <h1>Nama saya {this.nama}</h1>
);

untuk menampilkanya cukup dengan mengaksesnya melalui single bracket (pada JSX). Kita dapat menggabungkan dua buah jsx.

JSX elemen : {myElement} 

Aturan JSX (javascript syntax extension)

Terdapat beberapa aturan penulisan JSX yang harus difahami agar tidak melakukan kesalahan dalam coding. Berikut adalah beberapa aturan penulisan JSX :

  1. JSX harus ditulis dengan awalan syntax container dan ahiran syntax container. Maksudnya adalah pada awal penulisan jsx harus menggunakan kode html seperti : <ul>,<li>, <div>, <p> dan lain sebagainnya dan diahiri dengan menututup tag tersebut
  2. <img src={}> tidaklah valid. Syntax htmly yang tidak memiliki ahiran harus ditulis menjadi <img src={} />
  3. JSX tidak dapat digabungkan pada literal string , namun literal string dapat berada dalam jsx karena hakikatnya JSX adalah suatu object.

untuk mengkases javascript expression yang digunakan adalah single bracket (“{” expression “}” ) sebagaimana jika pada angular JS menggunakan dobule bracket ( “{{” expression “}}” ). jangan menuliskan literal pada bracket tersebut.

Expression

kita sudah membahas bahwa javascript expression dapat digunakan pada JSX. Expression ini akan bernilai berbeda tergantung cara penulisan. Contohnya pada attribute src pada syntax img, ketika variabel src kita tulis dengan menggunakan petik (“) maka nilai dari expression akan menjadi literal. Sedangkan ketika nilai attribute kita tulis dengan menggunakan bracket maka expression tersebut akan mengakses propery/variabel/fungsi yang ada pada class atau menjadi javascript expression. Contohnya adalah seperti dibawah ini

 render() {
    // return react element
    const nama = "degananda";
    const myImage = "https://degananda.com/wp-content/uploads/2017/06/cropped-logo.png";
    return (
      <div>
        expression literal pada attribute : <img src="https://degananda.com/wp-content/uploads/2017/06/cropped-logo.png" alt="test"/> 
        expression dari variabel pada attribute : <img src={myImage} alt="test"/> 
      </div>
    );
  }

Operator

kita dapat menuliskan operator (contohnya adalah operator matematika) pada bracket tersebut.

<div>
  operator : {2+2} 
</div>

operator-operator lainnya seperti conditional operator juga dapat dituliskan pada bracket tersebut yang akan dibahas pada ulasan-ulasan selanjutnya.

Fungsi

Menulis fungsi cukup langsung berikan nama dari fungsi tersebut tanpa harus menuliskan syntax function(layaknya membuat fungsi pada javascript)

  writeMyName(nama){
    return 'nama saya adalah : ' + nama;
  }

kita juga dapat menuliskan JSX pada fungsi. Pada kasus ini menggunakan if statement

  writeMyHobby(nama){
    if(nama === "degananda ferdian"){
      // JSX pada expression @ statement if atau statement loop
      return <h1>Hobi saya adalah {this.hobi}</h1>
    }
  }

Jika kita menggabungkan JSX dan literal maka pada browser yang akan ditampilkan adalah object. Sehingga jsx dan literal tidak dapat digabungkan

  writeMyFavoriteMovies(){
    const elementJSX = (
     <ul>
      <li>Forest gump</li>
      <li>Kimi no na wa</li>
     </ul>
    )
    return 'saya menyukai film : '  + elementJSX
  }

seluruh ulasan diatas terangkum dalam source code dibawah ini  :