Cara Membuat Framework Mini Seperti React Dalam 80 Baris Tanpa Virtual DOM

Jika kamu pernah penasaran bagaimana cara kerja React—mulai dari state, re-render, hingga update DOM,

namun merasa kesel karena terlalu banyak abstraksi, artikel ini untuk kamu.

Di sini kita akan membuat framework mini ala React hanya dalam ~80 baris JavaScript, tanpa Virtual DOM, tanpa diffing, dan tanpa bundler.

Framework ini mengusung prinsip sederhana

“Perubahan state → render ulang komponen → browser yang menentukan bagian DOM mana yang berubah.”

Karena kita tidak membuat Virtual DOM atau diffing manual, kita menggunakan mekanisme DOM reconciliation bawaan browser, yang sebenarnya sudah cukup efisien untuk UI kecil.

🎯 Tujuan Framework Mini ini

Framework kecil ini akan memiliki fitur :

• Component function (seperti React function component)
• State sederhana (useState)
• Reaktif → otomatis re-render jika state berubah
• Root render (seperti ReactDOM.render)
• Tanpa Virtual DOM

🧩 Konsep Utama Tanpa Virtual DOM

React menggunakan Virtual DOM untuk membandingkan perubahan sebelum menyentuh real DOM.

Namun browser modern sudah sangat cepat dalam memproses DOM update, apalagi untuk struktur kecil.

Framework kita akan :

1. Menyimpan state dalam array
2. Menjalankan ulang function component
3. Mengganti innerHTML dari root
4. Mengikat ulang event listener

Simple, tapi powerful.

🚀 Kode Lengkap Framework Mini (±80 Baris)

Berikut versi lengkap yang bisa langsung disimpan sebagai mini-react.js :

// ==============================
// Mini Framework ala React
// ==============================


let currentComponent = null;
let hookIndex = 0;


function useState(initial) {
    const component = currentComponent;


    if (!component.hooks[hookIndex]) {
        component.hooks[hookIndex] = initial;
    }


    const stateIndex = hookIndex;
    function setState(value) {
        component.hooks[stateIndex] = 
            typeof value === "function" 
                ? value(component.hooks[stateIndex])
                : value;


        render(component.root, component.fn);
    }


    const value = component.hooks[hookIndex];
    hookIndex++;
    return [value, setState];
}


function render(root, componentFn) {
    currentComponent = { fn: componentFn, root, hooks: currentComponent?.hooks || [] };
    hookIndex = 0;


    const output = componentFn();
    root.innerHTML = output.html;


    output.events.forEach(ev => {
        const el = root.querySelector(ev.selector);
        if (el) el.addEventListener(ev.type, ev.handler);
    });


    currentComponent = currentComponent;
}


function h(html, events = []) {
    return { html, events };
}


// Export fungsinya
window.useState = useState;
window.render = render;
window.h = h;

Total ± 78 baris.

Framework ini menyediakan :

• useState
• render
• h() sebagai “wrapper template

🧪 Contoh Penggunaan Framework Mini

Buat file index.html :

<div id="app"></div>
<script src="mini-react.js"></script>
<script>
    function Counter() {
        const [count, setCount] = useState(0);


        return h(`
            <div>
                <h1>Counter: ${count}</h1>
                <button id="btn">Tambah</button>
            </div>
        `, [
            {
                selector: "#btn",
                type: "click",
                handler: () => setCount(count + 1)
            }
        ]);
    }


    render(document.getElementById("app"), Counter);
</script>

📌 Cara Kerjanya

State Disimpan dalam Array

Mirip dengan cara React hook bekerja.

component.hooks[hookIndex] = initial

Saat setState dipanggil → render ulang

render(component.root, component.fn);

Component function dijalankan ulang

Setiap state berubah, component di-render dari awal.

Template direturn sebagai h(html, events)

Tidak ada Virtual DOM → langsung ganti innerHTML.

Event Listener Diikat Ulang

Framework mencari elemen berdasarkan selector.