1. Paradigma: Imperative vs Declarative UI
- **Imperative (Manipulasi DOM Manual)**: Anda memberi tahu komputer setiap langkah demi langkah secara mendetail (*Bagaimana* melakukannya). Misal: `btn.addEventListener()`, `document.getElementById()`, `element.appendChild()`. - **Declarative (React Mental Model)**: Anda cukup mendeskripsikan *Apa* tampilan UI yang Anda inginkan untuk nilai State tertentu ($UI = f(State)$). React akan mengurus seluruh pembaruan DOM secara otomatis di latar belakang.
2. Apa itu Sebenarnya JSX?
JSX bukan HTML dan bukan string. JSX adalah *syntactic sugar* untuk pemanggilan fungsi JavaScript `React.createElement()`.
| 1 | // Kode JSX yang kamu tulis: |
| 2 | const element = ( |
| 3 | <button className="btn-primary" onClick={handleClick}> |
| 4 | Klik Saya |
| 5 | </button> |
| 6 | ); |
| 7 | |
| 8 | // Kode hasil kompilasi yang dijalankan browser: |
| 9 | const elementCompiled = React.createElement( |
| 10 | 'button', |
| 11 | { className: 'btn-primary', onClick: handleClick }, |
| 12 | 'Klik Saya' |
| 13 | ); |
3. Virtual DOM & Proses Rekonsiliasi (Reconciliation)
Memperbarui DOM browser asli (Real DOM) itu mahal dan berat. React menggunakan strategi pintar: 1. Menyimpan representasi pohon UI ringan di memori JavaScript (**Virtual DOM**). 2. Saat state berubah, React membuat Virtual DOM baru. 3. Membandingkan Virtual DOM baru vs lama (**Diffing Algorithm**). 4. Hanya memperbarui node DOM nyata yang benar-benar berubah secara efisien (*Batching update*).
4. Simulasi React Mini Renderer di Terminal
| 1 | function createElement(type, props, ...children) { |
| 2 | return { type, props: { ...props, children } }; |
| 3 | } |
| 4 | |
| 5 | function renderToString(vnode) { |
| 6 | if (typeof vnode === 'string' || typeof vnode === 'number') { |
| 7 | return String(vnode); |
| 8 | } |
| 9 | const propsStr = Object.entries(vnode.props || {}) |
| 10 | .filter(([k]) => k !== 'children') |
| 11 | .map(([k, v]) => ` ${k}="${v}"`) |
| 12 | .join(''); |
| 13 | |
| 14 | const childrenStr = (vnode.props.children || []).map(renderToString).join(''); |
| 15 | return `<${vnode.type}${propsStr}>${childrenStr}</${vnode.type}>`; |
| 16 | } |
| 17 | |
| 18 | const myVNode = createElement('div', { class: 'card' }, |
| 19 | createElement('h1', null, 'Halo KuloDev!'), |
| 20 | createElement('p', null, 'React Declarative UI.') |
| 21 | ); |
| 22 | |
| 23 | console.log("Virtual DOM Tree:", JSON.stringify(myVNode, null, 2)); |
| 24 | console.log("Rendered HTML:", renderToString(myVNode)); |