Na úvod shrnu důvody, proč začít používat virtuální DOM a moderní JavaScript ES 6. Programování stránky, jaké ho známe všichni programátoři, se skládá z generování HTML stránky (slepenec stringů) a následného zobrazení v prohlížeči v podobě klasického DOM (objekt). Prohlížeč pracuje se stránkou jako objektem DOM.
Řešení problémů vzniklých při renderování stránky
Například náš nějaký PHP kód vyplní šablonu daty a pošle na výstup – tomu se říká renderování stránky. Jedná se o string, který prohlížeč převede na DOM (prostě nějaký model, se kterým se dá objektově pracovat). Pokud stránka obsahuje např. tlačítko, kterým po kliknutí chceme změnit pouze část DOM Ajaxem, nastává problém s objekty, které mají navěšené listenery např. onclick. Listener se musí na objekty ve změněném objektu navěsit znovu. Snadno se zapomene tohle naprogramovat. Ze šablony se stává nepřehledná směsice HTML elementů a JS listenerů napsaných v jQuery apod. Musíme řešit nejrůznější stavy, které mohou nastat. Ok funguje to. Změníme DOM. Ale co když ve změněném objektu měl návštěvník zrovna něco rozepsaného ? Tak mu to přepíšeme a to nechceme. Navíc je toto řešení umožňující měnit DOM náchylné k XSS útokům.
Existuje bezpečnější a přehlednější renderování stránky ?
Ano. React používá virtuální DOM. React nahrazuje definování komponent vlastní funkcí render(), která renderuje virtuální DOM.
Při změně React pak automaticky virtuální DOM rychlým porovnáním změn posílá do prohlížeče v podobě skutečného DOM, to my ale nemusíme řešit.
Jak tedy místo definování elementů a používání jQuery začít používat React a jeho metodu render() ? Návod zde. Stručně řečeno: Kód se nepíše v klasické JS syntaxi, ale v rozšířené JSX (ta se musí přeprocesorem převádět na čistý JS), není to žádný nový jazyk, jen nahrazení zápisu stringu funkcemi. Je třeba kód v elementu <script> označit atributem type=“text/babel“ a o konverzi se postará knihovna Babel, kterou můžeme přidat jednoduše takto: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>.
Production-ready JSX setup
Předchozí řešení ale na produkci nebude nejrychlejší, proto je lepší použít Node.js na serveru. Použitím Node.js se vyhneme úpravě atributu <script>. Řešení pomocí Node.js bude fungovat podobně jako preprocesor Less/SASS u CSS. Stačí ve složce projektu spustit příkazy:
npm init -y pokud proběhne OK, spustíme následně
npm install babel-cli@6 babel-preset-react-app@3
Kód budeme psát do složky /src a zapneme automatický překlad souborů při editaci: npx babel --watch src --out-dir . --presets react-app/prod . Ve výsledků např. soubor example.js ze složky /src bude zapsán do souboru example.js v podobě čistého JavaScriptu použitelného v projektu.
Jak vytvořit aplikaci v React
Npm verze 5.2+ přišlo s nástrojem (package runner tool) npx. Pomocí npx se dá přes konzoli/terminál jednoduše vytvořit aplikace příkazem: npx create-react-app my-app
Příkaz create-react-app natahá knihovny react, react-dom a react-scripts do složky projektu. Spouštění aplikace probíhá přes Babel, webpack, ale není potřeba o nich nic vědět.