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 →

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:

Manajemen State dengan Redux (tanpa React)

Redux adalah library untuk manajemen state aplikasi JavaScript. Library ini memang lebih sering dipake bareng React, tapi sebenernya bersifat framework agnostic. Jadi bisa dipake dengan atau tanpa framework. Mau pake VueJS, bisa. Pake Angular, ok. Pake Pure JS, boleh.

Dalam tutorial ini saya akan bahas contoh pemakaian Redux dalam aplikasi ES6.

Tapi sebelumnya, apa itu State?

Secara harfiah, state artinya kondisi/keadaan. Jadi yang dimaksud Application State kurang lebih adalah semua informasi/data yang bisa menggambarkan kondisi aplikasi pada suatu waktu.

Redux

Implementasi Redux bisa digambarin pake diagram berikut:

Continue reading →

Import & Export Modul dalam ES6

Ekspor / impor modul ES6 memang sedikit bikin bingung. Soale cara ekspornya macem-macem, impornya juga macem-macem. Berikut ini catatan singkat tentang cara ekspor & impor.

Kalo mau nyoba kode2 di bawah, bisa pake Poi.

1. Anonymous default export

//file: src/vehicles/car.js
export default (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, ' drive');
    }
  }
)

Continue reading →

Bikin Project JavaScript (Webpack) dengan Poi

Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.

Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.

Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.

Instalasi

Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.

$ yarn global add poi
#atau
$ npm install -g poi

Continue reading →