Tag / reactjs

by Anggie Bratadinata

Mengenal Hook di ReactJS

Sejak React 16.8 ada fitur baru yang namanya hook. Kalo baca di dokumentasinya, tujuan utama fitur ini adalah supaya komponen-komponen fungsional ( yg ga dibikin pake class ) punya akses ke API life-cycle. Tapi dalam prakteknya, manfaat hook lebih dari sekedar life-cycle. Kita bisa pake hook untuk bikin blok logic yang bisa dipake di mana-mana. Kalo Anda pernah belajar Design Patterns, hook sekilas mirip dengan Strategy Pattern, cuma lebih simpel.

Hooks Bawaan React

Ada beberapa hook bawaan React yg relatif paling sering dipake yaitu useState, useRef, useEffect, & useReducer.

useState

Dalam versi React sebelumnya, komponen fungsional sering disebut juga stateless component karena ga punya state. Tapi istilah stateless ga lagi akurat karena ada useState. Jadi sekarang semua komponen baik yang class-based ataupun yang functional bisa punya state.

Continue reading →

by Anggie Bratadinata

Seting Minimal Webpack & React

Bikin project React paling gampang memang pake create-react-app. Tapi itu lebih cocok untuk belajar ( dokumentasinya juga bilang begitu ). Untuk project beneran, kita bisa pake tool lain yang lebih fleksibel & bisa dikustom atau bikin sendiri dari nol pake bundler semacem Webpack, Parcel atau Rollup.

Untuk bikin project minimalis pake Webpack cukup gampang. Pertama ya bikin direktori, terus inisialisasi NPM.

$ mkdir myproject
$ npm init -y

Instal paket NPM

Instal paket-paket Babel.

$ npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i @babel/runtime

Terus instal webpack.

$ npm i -D webpack webpack-cli webpack-dev-server babel-loader

Lanjut instal paket untuk compile CSS & SCSS ( bisa diganti LESS atau CSS-preprocessor yg lain kalo mau).

Continue reading →

by Anggie Bratadinata

React: Context

Sebelum React 16.3, satu-satunya cara untuk ngirim state dari komponen parent ke komponen child adalah pake props. Jadi nggak jarang kita bikin komponen yang punya prop xyz tapi nggak memproses nilai prop itu, dia punya prop itu cuma biar bisa ngirim lagi ke komponen child di bawahnya lagi. Istilahnya props chain.

Jadi bisa dibilang komponen Child A sia-sia punya prop xyz karena dia sebenernya nggak butuh. Tapi karena Child B perlu prop itu, mau nggak mau Child A harus punya prop xyz. Mungkin kalo strukturnya nggak panjang, cuma ada 2 komponen child, masih okelah. Tapi kalo strukturnya panjang, jadi jelek & ribet sekali. Kita harus nambahin kode yang nggak perlu di banyak komponen sekedar biar bisa transfer prop xyz ke bawah. Alternatifnya, ya pake state-manager seperti Redux. Tapi pake Redux juga jadi beban tersendiri terutama kalo proyeknya nggak terlalu rumit. Bisa-bisa malah over-engineering.

Continue reading →

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: