Belajar React JS (PART 1) : Component di React JS

  Belajar React JS : Component di React JS

01. Apa itu React JS

• React JS adalah libray JavaScript yang digunakan untuk membangun user interface yang interaktif berbasis komponen untuk web.
• Komponen adalah bagian-bagian dari user interface yang menyusun aplikasi React seperti tombol, label, input, dll.

02. Apa itu DOM (Document Object Model)

• Menurut wikipedia Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent.
• Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
• Jadi secara sederhana DOM adalah representasi dari UI pada aplikasi kita. Setiap adanya perubahan pada state diaplikasi kita, DOM akan diupdate untuk menggambarkan perubahan tersebut.
  
  
  
  

03. Mengapa ada Virtual DOM

• Jika sudah ada DOM kenapa harus ada virtual dom? Secara singkat bentuk DOM sendiri adalah struktur data tree, karena itu jika adanya perubahan atau update ke dom akan cepat. 
• Namun, setelah adanya perubahan pada dom, element yang dirubah dari mulai parent hingga child nya akan dirender ulang untuk mengupdate UI di aplikasi kita. Proses re-rendering atau re-painting UI ini lah yang membuat lambat.
• Kita bisa bayangkan setiap kita membuat aplikasi yang mungkin sudah kompleks atau besar pasti banyak memiliki komponen-komponen, dan setiap adanya perubahan akan ada proses re-rendering untuk mengupdate UI kita. Nah dari sinilah muncul virtual DOM.
  
  
  
  

04. Apa itu Virtual DOM

• Virtual DOM secara singkat nya adalah sebuah javascript object (virtual) yang merepresentasikan DOM yang sebenarnya (real DOM). 
• Karena Virtual DOM adalah representasi dari real dom maka virtual dom adalah sebuah replikasi (copy) dari real dom tersebut.
• Berbeda konsep dengan DOM, virtual dom ini memiliki konsep yaitu setiap saat perubahan terjadi di state pada aplikasi kita maka akan membuat virtual dom yang baru (cloning).
• Seperti terlihat pada gambar diatas, ketika ada perubahan maka virtual dom akan membuat virtual dom baru dan melakukan comparation (diffed) dari virtual dom sebelumnya. Hanya perubahan tersebut yang akan dikirim ke real dom untuk mengupdate nya.
• Proses seperti ini membuat virtual DOM lebih cepat dibandingkan dengan DOM, jadi tidak perlu adanya proses re-rendering lagi pada keseluruhan DOM.
  
  
  
  

05. Virtual DOM pada React JS

• Pada React, setiap bagian dari UI adalah component, dan setiap component mempunyai state.
• React menggunakan konsep Observable Pattern dan mengamati setiap perubahan pada state. Ketika state pada sebuah component berubah, react mengupadate virtual DOM tree.
• Setelah virtual DOM diperbarui, React kemudian membandingkan versi sekarang virtual DOM dengan versi sebelumnya. Proses ini sering disebut dengan “diffing”.
• Setelah mengetahui object pada virtual DOM mana yang berubah maka hanya object tersebutlah yang akan dirubah pada real DOM. Proses seperti membuat performance aplikasi kita lebih baik.
  
  
  
  

06. Komponen di React JS

• Komponen adalah bagian-bagian yang menyusun aplikasi React. 
• Komponen-komponen tersebut dapat digunakan kembali (reusable) dan harus dibentuk dalam folder src yang ditulis dengan aturan Pascal Case sebagai konvensi penamaannya.
• Komponen dapat di-render ke elemen tertentu di DOM dengan menggunakan library React DOM.
• Di dalam React ada dua tipe komponen, yaitu Functional component dan Class component.

Functional component

• Functional component adalah komponen React yang dibangun murni menggunakan fungsi JavaScript. 
• Functional component tidak menyimpan state dan digunakan hanya untuk menampilkan UI.
• Dengan kata lain, komponen ini dapat disebut dengan komponen stateless. Walaupun stateless, komponen ini dapat menerima data melalui properti atau dikenal dengan props.
  
  

Class component

• Class component adalah komponen yang dibuat melalui Class JavaScript dan mewarisi sifat React Component. 
• Berbeda dengan Functional Component, Class Component dapat menyimpan dan mengelola state serta memiliki beberapa method, salah satunya adalah render digunakan untuk menampilkan UI.
• Komponen ini dapat disebut dengan komponen stateful karena dapat memiliki state.
  
  

Berikut beberapa kelebihan ketika kamu memanfaatkan komponen React dalam membuat UI website:

• State Management: Ketika membuat stateful komponen, kamu bisa memanfaatkan state untuk memutuskan bagaimana UI di-render berdasarkan sebuah nilai/keadaan secara reactive.
• Encapsulated: Seluruh data (gambar, CSS, atau data terstruktur) yang dibutuhkan oleh komponen dalam menampilkan UI berada di dalam komponen tersebut. Itulah mengapa komponen React terenkapsulasi.
• Reusable: Selain terenkapsulasi, komponen React juga bersifat reusable atau dapat digunakan kembali. Kamu tidak perlu membuat banyak komponen untuk menampilkan UI yang sama. Cukup gunakan yang sudah kamu buat.
• Fast Development: Efek dari komponen yang reusable adalah pengembangannya jadi cepat. Berbeda bila kamu harus membuat segala sesuatu dari nol.
  
  

06. Cara Membuat Component di React JS

Secara umum, ada tiga bagian yang biasanya ada di dalam komponen:

• Bagian Data (State, Props, Variabel)
• Bagian method atau fungsi
• Bagaian method render() (wajib ada jika menggunakan class).

Berikut ini cara membuat function components:

Contoh :

Sedangkan untuk class component, cara membuatnya harus melakukan extends dari class React.Component.

Contoh :

07. Konstruktor untuk Class Component

• Konstruktor adalah fungsi atau method khusus pada class yang akan dieksekusi saat objek dibuat atau komponen digunakan.
• Konstruktor hanya ada pada komponen yang dibuat dengan class.
• Konstruktor biasanya digunakan untuk melakukan inisialisasi komponen.
• Konstruktur dibuat dengan fungsi constructor(). Di dalam konstruktor, kita bisa mendefinisikan nilai awal untuk variabel maupun state.
• Pemanggilan fungsi super() di dalam konstruktor akan mengeksekusi konstruktor dari induk class, yakni React.Component. Tujuannya agar kita bisa mengakses semua method yang ada di class induk.
  
  

Berikut ini cara membuat konstruktor:

08. State dan Props pada Class Component

• State dan props adalah objek khusus yang menyimpan data untuk komponen.
• State adalah objek yang digunakan untuk menyimpan data di dalam komponen, sedangkan props adalah objek yang digunakan untuk menyimpan data yang diterima dari luar komponen.
• Data yang disimpan di dalam state bisa kita ubah-ubah, sedangkan data yang disimpan di dalam props tidak bisa diubah karena sifatnya read-only.
  
  
  
  

Cara Membuat State

• State dibuat di dalam konstruktor dan nilainya dapat langsung diisi di sana.
  
  

Contoh :

Pada kode di atas, kita mengambil nilai dari state dengan cara seperti ini:

Elemen ini akan di-render ulang jika nilai state berubah. Ini juga disebut reactive, React akan selalu melakukan update tampilan komponennya dengan mengikuti data pada state.

Mengubah Nilai State

• Untuk mengubah nilai pada state, kita bisa menggunakan method setState().
  
  

Contoh:

Pada method changeTitle() kode di atas, kita menggunakan arrow function. Tujuannya agar kita tidak melakukan binding. Memangnya kenapa kalau tidak menggunakan arrow function?

Jika kamu membuat method menggunakan fungsi seperti ini:

Atau seperti ini :

Hasilnya akan error this is undefined, karena this akan menunjuk ke fungsi itu sendiri bukan komponen.

Cara Membuat Props

• Props tidak perlu kita buat seperti state, karena ia hanya bertugas untuk menerima data dari luar komponen. Kita tinggal pakai saja.
• Nilai props tidak bisa diubah seperti state yang menggunakan fungsi setState(), karena sifat props hanya dapat dibaca saja (read-only).
  
  

Contoh :

Jika kita ingin memberikan nilai ke props dalam bentuk variabel. Kita tinggal tulis seperti ini:

07. Komponen Bersarang (Nested Components)

• Komponen bersifat reuseable atau dapat digunakan kembali. Hal ini akan sering kita temukan dalam komponen bersarang.
• Komponen bersarang atau Nested Components adalah komponen yang digunakan di dalam komponen.
  
  

Contoh :

Pada kode tersebut, kita menggunakan komponen <Message/> di dalam komponen <ChatBox/>. Inilah yang disebut dengan komponen bersarang atau komponen di dalam komponen.

08. Fitur-Fitur di React

Berikut adalah fitur-fitur yang ada di React:

JSX (JavaScript Syntax Extension)

• JSX adalah ekstensi React untuk JavaScript. Sintaks JSX mirip seperti HTML, sehingga membuat kita lebih gampang menyusun elemen pada komponen React.
• Elemen React adalah bagian terkecil dari sebuah aplikasi. Elemen React akan menyusun sebuah komponen. Elemen ini biasanya akan ditampilkan atau di-render.

Berikut adalah contoh code React dengan menggunakan JSX :

Jika kita tidak ingin menggunakan JSX. Mari kita lihat bagaimana kita dapat melakukannya? 

Tanpa JSX, kita bisa membuat elemen React dengan method: 

React.createElement();

Method ini punya tiga parameter yang wajib diisi:

• Type elemen dalam bentuk string
• Properti element dalam bentuk object
• Children dalam bentuk string dan juga object react element
  
  

Contoh :

Ini adalah code yang sama yang ditulis dengan JSX. Jadi, JSX memungkinkan kita untuk menulis HTML elemen didalam javascript tanpa menggunakan method createElement() atau appendChild().

Kita tidak harus menggunakan JSX, tapi JSX membuat jadi lebih mudah dalam membuat aplikasi React. Setiap JSX elemen hanyalah syntactic sugar untuk memanggil React.createElement. Jadi, semua yang kita lakukan dengan JSX dapat juga dilakukan dengan plain javascript.

Ketika menulis kode JSX kita sebaiknya mengikuti hal-hal berikut:

• JSX biasanya ditulis di dalam method render() pada class component dan pada statement return di function component. Kita juga bisa menulis JSX di dalam variabel. Biasanya JSX yang ditulis di dalam variabel akan sering digunakan ulang pada komponen.
  
  



• Untuk menulis JSX yang lebih dari satu element disarankan menggunakan tanda kurung () dan menggunakan elemen induk (elemen pembungkus) atau menggunakan fragment.
  
  



• Menyisipkan ekspresi javascript. Ekspresi javascript yang valid bisa di sisipkan dalam kode JSX dengan menggunakan curly braces {}.
  
  



• Semua top level elemen kode HTML didalam JSX harus di bungkus dalam SATU level element. Jadi ketika menulis banyak elemen, kita harus menaruhnya didalam single parent elemen.
  
  



• Sebuah blok kode HTML untuk menulis potongan HTML dalam beberapa baris, letakan kode HTML didalam sebuah tanda kurung () dan simpan didalam sebuah variable. Variable ini bisa digunakan dimana saja sebagai pengganti HTML.
  
  



• Semua elemen harus ditutup. Semua HTML elemen harus ditutup dengan benar. JSX akan melempar sebuah error jika HTML tidak ditutup dengan benar.
  
  

Penulisan Atribut di JSX

• Penulisan atribut di JSX sama seperti penulisan atribut di HTML biasa, hanya saja beberapa atribut harus ditulis dengan aturan JSX.
• Misalnya seperti atribut class, pada pada JSX ditulis dengan className. Hal ini karena class adalah kata kunci yang sudah ada di Javascript untuk membuat class.
• Lalu untuk atribut lainnya yang ditulis secara khusus adalah atribut event seperti onclick, onmouseover, dll. Pada HTML biasa kita tulis dengan huruf kecil semua, sedangkan pada JSX ditulis dengan format CamelCase.
  
  

Contoh:

React tidak perlu menggunakan JSX, tapi kebanyakan orang merasa terbantu sebagai bantuan visual saat bekerja dengan UI didalam kode javascript.

JSX juga memungkinkan React untuk menampilkan pesan error dan warning yang lebih berguna.

Data binding searah

Data binding ini merupakan suatu proses menghubungkan elemen tampilan atau user interface dengan data atau komponen yang mengisinya. 

Data binding pada React ini merupakan data binding satu arah. Salah satu kondisinya mungkin dapat terlihat seperti ini:

• Component to View : Setiap perubahan yang terjadi dalam data component akan terlihat dalam view.
• View to Component : Setiap perubahan yang terjadi dalam view akan terlihat juga dalam component.
  
  

Selesai.

Sumber :

https://medium.com/@ekowahyus/react-virtual-dom-40e0e2781652

https://www.dicoding.com/blog/apa-itu-react/

https://www.petanikode.com/reactjs-komponen/

https://ajatdarojat45.id/apa-itu-jsx