Udah lebih dari 10 taun saya pake domain masputih.com ini. Awalnya pake Textmate, terus pake WordPress sampe sekarang. Lama-lama bosen juga & pengen nyoba yang baru. Ghost keliatannya menarik. Jadi ini terakhir kalinya saya posting di sini. Postingan selanjutnya bisa dibaca di rumah baru saya, www.goora.me.
Kenapa bikin domain baru? Ya eman-eman link yang udah diindeks sama Google 🙂 Daripada hilang, mending sekalian bikin domain baru.
Hati-hati pake objek global. di NodeJS. Nilai yang disimpen di situ di-share semua requests.
Contoh di bawah, semua request yg masuk setelah “A” dapet global.name = A biarpun asalnya dari user/browser/client lain.
router.get('/', function(req, res, next) {
if(req.cookies.name === 'A') {
global.name = 'A'
console.log('REQUEST FROM A: global.name', global.name)
} else {
console.log('REQUEST FROM OTHERS: global.name', global.name)
}
res.render('index', { title: global.name });
});
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.
Komunikasi antar komponen di React umumnya pake props dan callback. Tapi kita bisa juga bisa pake hook useImperativeHandle untuk bikin semacam public API di komponen yang bisa dipanggil langsung dari komponen lain, bisa komponen parent atau sibling. Jadi nggak pake props lagi.
Yang diperlukan:
1. useRef
2. forwardRef
3. useImperativeHandle
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.