Author / Anggie Bratadinata

by Anggie Bratadinata

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 →

by Anggie Bratadinata

8 Perintah Git Esensial

Beberapa perintah Git yang esensial selain yg dasar-dasar. Wajib tau, lebih bagus kalo hafal.

1. Bikin Branch dari Commit Tertentu

Bikin branch dari commit tertentu.

$ git checkout -b [nama branch] [commit hash]

Bikin branch lokal yang nge-track remote branch yang udah ada,

$ git checkout -b [nama branch] --track origin/[nama branch]

2. Merge Non-FF

Kalo mau selalu ada merge-commit tambahin opsi --no-ff.

$ git merge A --no-ff

Bedanya pake flag --no-ff ato nggak kira-kira begini:

3. Stash

Git stash utk nyimpen perubahan konten tanpa harus commit.

Continue reading →

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

Python 101: Dictionary

Dictionary adalah tipe data yang nggak berurutan. Isinya koleksi data dalam bentuk pasangan key & value, sama dengan Object di JavaScript. Bedanya kalo bikin key di Python harus pake string.

Jadi kode begini, yg valid di JS, di Python ga bisa dipake:

person = { name: 'boss' }

# error
NameError: name 'name' is not defined

Cara aksesnya juga sama dengan Object di JS, pake sintaks [key]. Tapi di Python nggak bisa pake dot-notation.

person = { 'name': 'boss', 'age': 40 }

print(person['name'])
# output
boss


print(person.age)
# error
AttributeError: 'dict' object has no attribute 'age'

Pake get() untuk Mengakses Value

Kalo pake bracket-notation, kita bakal dapet error kalo key-nya ga ada.

person = { 'name': 'boss', 'age': 40 }
print(person['gender'])

#error
KeyError: 'gender'

Untuk menghindari error begini, kita pake get().

Continue reading →

by Anggie Bratadinata

Rust 101: Hello Rust

Rust adalah bahasa pemrograman yang diciptakan oleh Graydon Hoare di Mozilla Research. Bahasa ini secara sintaks mirip C++ tapi dirancang dengan manajemen memori yang lebih baik tanpa mengorbankan kecepatan. Rust bersifat generik & bisa dipake untuk membuat software mulai dari OS sampe browser, dari embedded-systems sampe Cryptocurrency. Beberapa proyek-proyek high-profile yang pake Rust antara lain NPM, Firefox, dan Dropbox.

Dalam artikel kali ini, saya bahas sedikit tentang Rust. Mulai dari instalasinya.

Instalasi

Kita bisa instal Rust pake installer resmi dari websitenya. Kalo pake Mac, bisa juga pake Homebrew. Yang pake Windows, bisa coba instal pake Chocolatey.

$ brew install rustup
$ rustup-init

... bla bla bla

1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
> 1

Untuk mastiin instalasi udah bener, kita coba bikin Hello world.

Continue reading →