HTML DOM a JavaScript vs React.createElement
Přepis do React.createElement
Nyní si ukážeme, jak vypadá stejná aplikace napsaná v React pomocí React.createElement.
HTML + JavaScript
V HTML můžeme vytvořit jednoduchou stránku s prvkem div#root, do kterého budeme vkládat naši aplikaci z JavaScriptu:
<body>
<div id="root"></div>
</body>const root = document.getElementById('root');
const element = document.createElement('div');
element.textContent = 'Ahoj světe!';
root.appendChild(element);React.createElement
V Reactu vytvoříme stejný div a vložíme do něj text velmi obdobně:
const element = React.createElement('div', null, 'Ahoj světe!');
const root = document.getElementById('root');
ReactDOM.render(element, root);document.createElement a appendChild vs React.createElement
V Reactu nemusíme používat appendChild při tvorbě každé komponenty. Můžeme prostě říct, tato komponenta bude mít tyto potomky.
// JavaScript přístup
const children = document.createElement('div');
children.textContent = 'Já jsem dítě!';
const parent = document.createElement('div');
parent.textContent = 'Já jsem rodič!';
parent.appendChild(children);
const root = document.getElementById('root');
root.appendChild(parent);// React přístup
const children = React.createElement('div', null, 'Já jsem dítě!');
const parent = React.createElement('div', null, 'Já jsem rodič!', children);
const root = document.getElementById('root');
ReactDOM.render(parent, root);Výhody React přístupu, které jsou už doufám jasnější :)
✅ Deklarativní
- Popisujeme CO chceme, ne JAK
- Kód je čitelnější a snadněji pochopitelný
✅ Komponentní
- UI rozdělené na znovupoužitelné části
- Snadnější testování a údržba
✅ Reaktivní
- UI se automaticky aktualizuje při změně dat
- Žádné ruční manipulace s DOM
✅ Centralizovaný stav
- Všechny data na jednom místě
- Snadné sledování změn
✅ Uni-directional data flow
- Data komponentami tečou jedním směrem, zeshora dolů
- Předvídatelné chování
V další části si ukážeme, jak tento kód ještě více zjednodušit pomocí JSX!