Ask Istilah atau Terminologi di React JS (Seri : Mudah Belajar React JS Bagian 2) AdityaDees

 

Bismillah...
Sebelum mulai membuat aplikasi utuh menggunakan React JS, sangat ditekankan bagi anda untuk mengenal istilah-istilah atau terminologi dalam penggunaan React JS ini. Dengan mengenal istilah tersebut maka akan membantu anda untuk melanjutkan tahapan pembelajaran berikutnya nanti insyaAllah.

Berikut adalah istilah-istilah didalam React JS :

1. DOM
DOM (Document Object Model) merupakan sebuah API yang digunakan javascript untuk memanipulasi dokumen html, xml dan juga svg. Dengan DOM memungkinkan kita untuk memanipulasi element-element html melalui javascript, sehingga sebuah website akan terlihat lebih dinamis dalam menampilkan informasi yang dimuat oleh website tersebut. Dalam javascript, penggunaan DOM ini menggunakan keyword document. Sebagai Contoh :


document.write("hello world")
document.getElementById("app")



2. Virtual DOM
Jika sebelumnya kita sudah mengenal istilah DOM, sekarang kita juga perlu mengetahui istilah Virtual DOM. Virtual DOM sendiri adalah DOM yang dibuat secara virtual yang disimpan didalam memori. Proses perubahan UI melalui Virtual DOM tidak langsung mengakses DOM yang asli di browser, akan tetapi disimpan di memori yang kemudian akan dilakukan sinkronisasi dengan DOM yang sebenarnya (Real DOM).

Sebagai contoh, misalnya kita memiliki element form input text A dan input text B. Nah, form input tersebut akan di clone ke Virtual DOM. Jadi di Virtual DOM akan memiliki salinan dari Real DOM. Pada saat terjadi perubahan inputan misalnya di text A, Virtual DOM akan melakukan perubahan di semua element. Akan tetapi, hal ini tidaklah menjadi masalah karena proses perubahan di Virtual DOM lebih cepat dan ringan karena dijalankan di memori. Kemudian jika perubahan telah selesai dilakukan, selanjutnya Virtual DOM akan melakukan sinkronisasi ke Real DOM dan hanya element yang terjadi perubahan saja yang akan di perbahrui di Real DOM.


3. JSX
JSX atau extended javascript ini memungkinkan kita untuk menulis script html secara langsung di javascript. Hanya saja perlu diperhatikan bahwa setiap script html yang ditulis harus Nested, artinya kita harus memperhatikan buka dan tutup sebuah tag html.
Misalnya kita membuat tag “<h1>”, maka di akhir jangan lupa untuk menutup tag tersebut dengan “</h1>”. Sebagai contoh :


function sayHello(){
    const name = <span style={{color:'red'}}>Ahmad</span>
    return <h1>Hello {name}, saya belajar react.js</h1>
}



4. Elements
Didalam React JS, elemen adalah blok terkecil di aplikasi. Sebuah elemen menggambarkan apa yang ingin kita lihat dilayar. Berbeda dengan elemen DOM, elemen React merupakan objek biasa dan mudah untuk dibuat. React DOM mangatur pembaruan DOM agar sesuai dengan elemen React. Elemen React itu sendiri tidak dapat diubah-ubah. Sebagai contoh :

const element = <h1>Hello, world</h1>



5. Components
Istilah component akan sering kita dengar selama membuat aplikasi dengan React JS. Komponen itu sendiri secara konsep mirip dengan fungsi pada javascript yang reusable. Komponen menerima beberapa inputan (biasa disebut “props”) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil dilayar.
Berikut adalah beberapa contoh pembuatan komponen di React JS :


const Dashboard =(props)=>{
  return  <h1>Hallo, ini dashboard </h1>
}


Atau bisa juga di tulis dengan meng-extends dari class React.Component

class Dashboard extends React.Component{
  render(){
    return  <h1 >Hallo, ini dashboard </h1>
  }
}


Perlu diperhatikan bahwa penulisan nama komponen yang benar di React JS adalah dengan menggunakan huruf besar di awal.


6. Props
Props merupakan inputan untuk React Component. Data inputan dari props ini diturunkan dari Parent Component ke Child Component. Data-data yang dikirim melalui props ini tidak bisa diubah di Child Component alias read only.
Sebagai contoh :

const ChildComponent = (props)=>{
  return <h1>Judul dari parent adalah {props.title}</h1>
}

class ParentComponent extends React.Component{
  render(){
    return <Child title="Semangat Belajar React JS"/>
  }
}




7. State
State merupakan sekumpulan object yang berada didalam sebuah komponen React. State ini sifatnya private, artinya tidak bisa diakses oleh komponen lain. Masing-masing komponen bisa mengatur/mengubah nilai state yang ia miliki.


import React, {Component} from "react";

class Dashboard extends Component{
    constructor(props){
        super(props)
        this.state = { // penulisan state
            title:"Selamat Datang"
        }
    }

    render (){
        return <h1>Hello, {this.state.title} {/*Pemanggilan state*/}</h1>
    }
}




8. React Hooks
Hooks merupakan fitur baru di React versi 16.8. Dengan Hooks, kita dapat menggunakan state dan fitur React yang lainnya tanpa perlu menulis sebuah kelas seperti yang kita tulis diatas tadi. Jadi Hooks ini lebih sederhana dalam hal penulisan kode untuk membuat komponen dibandingkan dengan class component. Berikut ini adalah contoh penulisan komponen menggunakan React Hooks :


import React, {useState} from "react"
const DashboardHooks =(props)=>{
    const [title, setTitle] = useState("Selamat Datang") // penulisan state
 
    return (
        <h1>Hello, {title} {/*Pemanggilan state*/}</h1>
    )
}

Baik, demikianlah istilah-istilah yang coba saya rangkum. Dimana istilah tersebut akan sering anda jumpai selama ngoding menggunakan React JS. Mungkin masih ada lagi yang istilah-istilah lainnya yang belum sempat saya masukkan di tulisan ini yang bisa anda baca dari sumber yang lain.
Semoga ilmu ini bermanfaat untuk anda dan saya, aamiin.