Compound Component

Compound component adalah sebuah komponen yang terdiri dari komponen-komponen yang lebih kecil. Komponen-komponen ini kalo sendirian ga ada gunanya. Kalo di HTML biasa salah satu contohnya adalah komponen <select>.

<select>
  <option />
  <option />
</select>

Pattern ini adalah alternatif dari render-props. Tujuannya sama, bikin komponen yang fleksibel & struktur komponen children-nya terserah user/consumer.

useContext untuk Global State

Nggak semua aplikasi React butuh Redux/MobX atau library sejenisnya. Untuk banyak kasus kita bisa pake React Context aja.

Context punya dua bagian utama yaitu Provider yg nyediain variabel & fungsi-fungsi global, dan Consumer sebagai pemakainya.

Untuk bikin Provider, pertama kita buat context pake createContext(). Terus kita pake komponen Context.Provider.

import React, { useState, createContext } from 'react';
import Header from './Header';
import Mailbox from './Mailbox';
import './styles.scss';

export const AppContext = createContext();

export default function App() {
  // global state
  const [user, setUser] = useState(null);

  return (
    <AppContext.Provider
      value={{
        user,
        setUser
      }}
    >
      <div className="App">
        <Header />
        <Mailbox />
      </div>
    </AppContext.Provider>
  );
}

Kenapa objek context-nya perlu diekspor? Biar bisa dipake di komponen-komponen lain yang jadi consumer-nya.

Continue reading →

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 →

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 →