Mengenal Virtual DOM pada ReactJs

Siapa sih yang ga pake facebook sekarang ini? tim developer facebook diam-diam ngebuat library open source bernama reactjs yang ternyata dipakai sendiri oleh mereka untuk versi web facebook, whatsapp dan instagram. Tim developer facebook mulai ngebuat library reactjs ini uda dari tahun 2013 jadi uda cukup lama dan cukup serius untuk dikembangkan lebih lanjut, terbukti dari repository githubnya yang selalu update, teman-teman bisa akses di sini nih https://github.com/reactjs daaan dokumentasinya yang cantik banget, bisa diliat di sini https://facebook.github.io/react/ dan di Indonesia sudah ada beberapa yang menggunakan reactjs contohnya kumparan.com dan salestockindonesia.com.

Virtual DOM
Singkatnya dengan virtual DOM kita ngebuat sebuah abstraksi DOM yang biasa disebut sebagai component. Component ini lah yang nanti nya di render ke dalam file HTML dengan JSX maka itu semua dapat terjadi.

Contoh :

var KudoBox = React.createClass({
render() {
return (
 

Hello, World! I’m Kudo’s Engineering

 
); } }); var KudoPlex = React.createClass({ render() { return (
 

Kudoplex 2

 
); } });

Component KudoBox & Home diatas akan dirender ketika route /kudobox dan route /home dijalankan dengan script berikut :

ReactDOM.render((

), document.getElementById('content'));

Karena component tersebut dipanggil sesuai kebutuhan saja maka proses load data akan menjadi lebih cepat.

State
Data-data dimasukan ke dalam state dan ketika ada perubahan dalam data maka state yang harus diubah, state ini bisa berupa JSON atau array of object.

Redux
Redux dibuat oleh Dam Abramov yang berfungsi sebagai manajemen state untuk aplikasi javascript, kerennya Dam Abramov di recruit sama tim developer facebook untuk ngembangin reactjs, redux dan kawan-kawannya.

Yang paling utama dalam redux adalah reducers dimana reducers ini adalah sebuah pure function yang menyimpan state sebelumnya dan action yang akan mempengaruhi keadaan pada state, dan redux bisa digunakan dengan view library lain nya selain reactjs.

Berikut gambar flow react dan redux :

Sumber: http://kenev.net/2015/09/06/redux-counter-sample-diagram/

 

Create react app

Melalui create-react-app kita dapat dengan lebih mudah dan meminimalisir konfigurasi setting yang dibutuhkan hanya dengan menjalankan perintah `create-react-app <space> nama_folder` dan lagi-lagi Dam Abramov merupakan salah satu contributor disini. Cukup oke kan untuk jadi developer idola kita 🙂

Sumber: https://blog.hellojs.org/testing-react-native-and-redux-e5a71b99e178#.eyxfx8xo7

Comments

comments

kenduigraha

You Might Also Like

No Comment

Leave your thought