Pengenalan React JS
Last updated
Was this helpful?
Last updated
Was this helpful?
Seperti yang sudah dijelaskan pada website resmi react, react merupakan library javascript untuk membangun sebuah user interface
A Javascript library for building user interfaces
React dibuat oleh facebook dan menjadi salah satu tool frontend populer karena penggunaan JSX dan konsep component based architecture nya
Selengkapnya tentang react :
Banyak yang membandingkan react dengan angular, vue atau framework lain, sedangkan react sendiri bukanlah framework melainkan hanyalah sebuah library
Apa perbedaan framework dan library ?
Framework dibuat untuk menyelesaikan banyak masalah, misalnya kita ambil contoh framework angular, dalam angular terdapat banyak fitur yang dapat menyelesaikan banyak permasalahan seperti :
rendering UI
state manager
routing
Ajax calling
dan masih banyak lagi...
framework juga mempengaruhi kita dalam membuat struktur aplikasi, artinya kita tidak bisa seenaknya membuat struktur aplikasi, kita harus mengikuti aturan yang sudah disediakan oleh framework yang kita gunakan.
Sedangkan library hanya fokus untuk memecahkan sebuah masalah, misalnya react hanya fokus terhadap pembangunan sebuah user interface, sehingga apabila kita ingin membangun fitur routing misalnya, kita bisa menggabungkan react dengan library lain (misalnya react-router)
React menggunakan virtual DOM untuk mempercepat proses perubahan node pada DOM
Virtual DOM merupakan DOM yang disalin kedalam bentuk JSON.
Cara kerja dari Virtual DOM adalah sebagai berikut :
Virtual DOM menyalin semua node yang ada pada DOM kedalam bentuk JSON
React mengubah state aplikasi
Virtual DOM baru dibuat oleh react berdasarkan Virtual DOM lama, namun dengan mengikuti perubahan state (Virtual DOM lama tetap ada)
Virtual DOM lama dan Virtual DOM baru dibandingkan untuk mengetahui letak node yang berubah
Setelah mengetahui node mana yang berubah, maka Virtual DOM baru menyalin node yang berubah ke DOM
Untuk lebih memahami cara kerja Virtual DOM, silahkan simak video berikut :
React menggunakan konsep component based architecture yang membuat dia menjadi populer seperti sekarang, namun apa itu component based architecture ?
Component based architecture merupakan teknik pembuatan UI yang memecah sebuah halaman besar menjadi beberapa component - component kecil yang memiliki logic sendiri - sendiri, sehingga apabila ada satu component yang error maka kita tidak perlu membuka sebuah halaman besar melainkan hanya perlu fokus kepada satu component kecil itu saja.
Kebalikan dari component based architecture adalah template based architecture, arsitektur ini biasa digunakan sebelum component based populer, dimana kita akan memiliki sebuah halaman dengan logic yang ditumpuk pada satu halaman tersebut, kelemahannya yaitu apabila ada sebagian fitur yang error, maka kita perlu membuka keseluruhan halaman untuk menangani error tersebut.
Selengkapnya tentang component based architecture :
Official Website -
Selengkapnya tentang perbedaan framework dan library :
Penjelasan component based architecture -
Kelebihan component based architecture -
