Tag / reactjs

by Anggie Bratadinata

ReactJS : Higher Order Component

Higher-order Component (HOC) adalah teknik untuk bikin komponen ReactJS baru dari komponen yang udah ada. Jadi kita bisa bikin komponen baru yang punya fitur atau fungsi tambahan dengan cara komposisi yaitu satu atau lebih komponen digabung & dibungkus komponen lain.

Kalo di bahasa OOP, ini cocok sama prinsip: Favor composition over inheritance

Misalnya kita punya komponen A & B. Kita bisa pake HOC untuk bikin komponen baru C yang isinya A & B plus fitur-fitur & komponen/elemen DOM yang lain. Jadi komponen C kurang lebih bisa digambarin kayak begini. Dua komponen yang lain tetep bisa dipake sendirian:

Contoh implementasi HOC antara lain di React-Redux, di mana kalo kita mau bikin komponen yang bisa merespon update di Store & kirim objek Action kita tulis kode begini:

Continue reading →

by Anggie Bratadinata

ReactJS: Controlled & Uncontrolled Input

Controlled Input adalah elemen form yang nilainya (value / state) dikontrol oleh React. Lawannya adalah Uncontrolled Input, state-nya dikontrol oleh elemen itu sendiri seperti normalnya form biasa.

Nilai yang dimasukin ke Controlled Input diproses dulu oleh React (onChange callback) baru inputnya diupdate. Dalam contoh di atas, text yang dimasukin ke text input nggak langsung dipake sebagai input.value tapi dikonversi dulu ke huruf besar oleh handleNameChange. value dari inputnya sendiri baru diset setelah state berubah (setelah setState()).

Jadi Controlled Input dalam contoh di atas cara kerjanya kurang lebih begini:

by Anggie Bratadinata

ReactJS : Server & Client Routing

Pada dasarnya, ada tiga macem Routing dalam aplikasi web: Server-side ,Client-side, & kombinasi keduanya. Dalam tutorial ini saya akan bahas tentang routing di sisi klien & server pake React Router.

Sedikit info buat yang belum tau routing .

Server-side Routing

Dalam Server-side Routing semua rekues dihandel server yang akan kirim HTML sebagai respon ke browser.

Jadi misalnya dari home page: www.tiket.com kita buka www.tiket.com/pesawat, rekues dikirim ke server yg kemudian kirim respon HTML yg berisi halaman /pesawat ke browser.

Jadi ini model konvensional. Rekues -> server -> browser refresh.

Ini routing untuk web page ya. Kalo routing untuk REST API, ya nggak perlu browser refresh.

Client-side Routing

Client-side Routing mulai populer dengan adanya dukungan browser utk History API dari spesifikasi HTML5 & munculnya Single-page Application (SPA). Jadi waktu kita buka /pesawat, nggak ada rekues yg dikirim ke server. Rekues dihandel oleh kode JavaScript yang kemudian menampilkan komponen Flight di browser. Kalo kita pindah ke /train , ya yang ditampilin adalah komponen Train.

Continue reading →