in Javascript, Programming

Mengenal React JS – [part 1]

Halo, Selamat datang di blog saya.

Pada kesempatan ini, saya akan memperkenalkan Anda dengan salah satu javascript library yaitu React JS. Saya akan membuat beberapa artikel mengenai React JS berdasarkan pengalaman saya dalam belajar. Untuk sekedar mengingat – ingat apa yang sudah saya pelajari dan siapa tahu bisa bermanfaat juga bagi yang mau belajar React JS.

Sebelum lanjut membaca, artikel ini ditujukan untuk yang sudah paham dengan dasar – dasar HTML dan Javascript.

Apa itu React?

React adalah javascript library yang dikembangkan oleh Facebook dengan tujuan untuk membuat user interface komponen yang mudah untuk diatur dan mudah untuk dikembangkan. React JS menggunakan konsep virtual DOM, dimana React membuat cerminan dari DOM sebenarnya. Ketika terjadi perubahan state atau data pada komponen React, maka React akan mengidentifikasi perubahan dan memperbarui DOM. Konsep ini membuat React JS lebih cepat dalam memperbarui sebuah komponen user interface.

Lalu apa itu DOM?

DOM (Document Object Model) yang merupakan sebuah application programming interface yang memperlakukan dokumen seperti HTML, XML atau XHTML sebagai sebuah tree diagram yang setiap node nya merepresentasikan setiap objek dari dokumen. Yang ingin tahu lebih jauh coba dibaca dulu mengenai DOM.

Tidak masalah jika merasa masih bingung tentang DOM, karena kita tidak akan membahas terlalu dalam mengenai DOM. Pada intinya adalah, React melakukan prosesnya pada virtual DOM dan jika proses yang dilakukan React sudah selesai, maka React akan menulis perubahan komponen tampilan pada DOM. Sehingga pengguna browser dapat melihat perubahan tersebut.

Lalu, kenapa saya memilih React?

React membagi sebuah user interface atau tampilan sebuah halaman website, menjadi beberapa komponen kecil. Untuk setiap komponen kecil memiliki proses yang berbeda. Untuk lebih jelasnya, bisa dilihat pada gambar berikut:

komponen react js

komponen react js

Pada gambar tersebut, terdapat sebuah halaman website yang terdiri dari beberapa komponen kecil. Dengan membagi tampilan menjadi beberapa komponen, maka ketika terdapat perubahan tampilan pada bagian komponen B, React hanya akan memproses komponen B tanpa mempedulikan komponen lain. Hal ini membuat React dapat memperbarui sebuah komponen pada halaman dengan lebih cepat.

Keuntungan kedua adalah, dengan membagi halaman menjadi beberapa komponen kecil, kita dapat melakukan pengembangan dan pemeliharaan kode React dengan mudah. Misalnya pada gambar sebelumnya, jika pada komponen A yaitu search bar terdapat perubahan kode program, kita hanya perlu merubah sebuah file dari komponen A tersebut, tanpa mengganggu kode dari komponen lain.

Kesimpulan

React memiliki beberapa keunggulan akan tetapi dokumentasi React tidak mudah untuk dipahami meskipun dukungan komunitasnya bagus. Perlu membaca berulang – ulang untuk memahami konsep React. Tetapi, jika sudah paham dengan konsep React, saya yakin pasti akan terasa mudah sekali mengembangkan sebuah website dengan React JS.

Terima kasih sudah membaca dan sampai jumpa pada artikel selanjutnya.

Write a Comment

Comment