Chci používat stávající projekt napsaný v PHP a frontend rozšířit o React ? O tom je tento článek. React je JavaScriptová knihovna a hodí se tvorbu uživatelského prostředí. React je řízený komponentama, kód je sestavitelný, znovupoužitelný, testovatelný, no prostě usnadní práci. Komponenty se dají používat přes ES moduly (import …) nebo CommonJS (require …).
Vložení React.js do projektu
Pokud nemám v projektu konfigurační soubor package.json, tak si ho nejdříve vytvořím příkazem npm init.
Péhapkáři jistě znají nástroj „composer“, takže fungování nástroje „npm“ pro JS pochopí snadno. Místo /vendor se používá adresář /node_modules, dobré je přidat si ho do .gitignore (pokud máte celý projekt v GIT).
Další balíčky se instalují také přes npm. Parametr i = instalace, zapíše do dependencies, takže není třeba si pamatovat, co všechno bude třeba k buildu.
Instalace závislostí
npm i react – knihovna react obsahuje základní funkce pro práci s komponentama, typicky se používá dohromady buďto s react-dom pro weby nebo react-native pro nativní prostředí.
Poznámka: Ve výchozím nastavení je zapnut development mód (zobrazuje chybové hlášky), který je při buildu třeba přepnout na production.
„dependencies“: {
„react“: „^16.8.6“,
„react-dom“: „^16.8.6“
},
npm i react-dom – knihovna react-dom pro práci s DOM, vyžaduje knihovnu react
Instalace závislosti pouze pro vývoj
npm i eslint --save-dev– knihovna ESLint na odhalování chyb při vývoji (parametr –save-dev uloží v package.json do devDependencies)
„devDependencies“: {
„eslint“: „^5.16.0“
}
Jak používat ESLint doplním později. Nyní mám připravené závislosti a můžu začít programovat. Moje projekty tvoří MVC architektura (kontrolery, modely, šablony), jak do tohohle stacku přidat React ? JS soubory mám oddělené ve složce /js. Budu potřebovat JS renderovat na straně serveru ? Nejsnažší cesta je renderovat na straně klienta, ale načtení bude trvat déle a z pohledu SEO bude stránka pro vyhledávače (Googlebot si JS obsah stránky nevyrenderuje) prázdná. Renderování serverem redukuje čas prvního smysluplného načtení stránky a z pohledu SEO je nezbytné.
React.js SSR – renderování na straně serveru
Jsou na výběr dvě možnosti.
1. Node.js render server
2. V8js – rozšíření PHP
Jde to snadno, místo metody ReactDOM.render() použijeme ReactDOMServer.renderToString() nebo podobnou metodu renderToStaticMarkup() pro renderování bez interních atributů pro statické stránky, ušetří pár bajtů. Server bude vracet už jen HTML bez nutnosti něco renderovat v prohlížeči. Renderování zajišťuje služba Node.js. V PHP pošleme JS soubor na Node server a ten nám vrátí HTML. Ale co když potřebujeme provádět JS během PHP ?
php-v8js
Existuje rozšíření PHP nazvané React.js V8Js (php-v8js). Vytvoříme si objekt $v8 = new V8Js(); a můžeme s ním provádět JavaScript v PHP metodou executeString(‚ javascript kód…‘). Vznikne hrozná míchanice PHP kódu a JS kódu.
React-PHP-V8Js
Přímo pro React existuje dokonce experimentální knihovna React-PHP-V8Js, která používá rozšíření php-v8js k renderování UI komponent. Jde o experiment a nevím nevím, jestli budou nejnovější verze Reactu tohle podporovat, podle Issues na GitHubu asi nebudou. Nicméně vytvoříme si objekt $rjs = new ReactJS(…), parametry jsou cesty k souboru react-bundle.js a JS skriptu, který chceme provést. Do objektu $rjs metodou setComponent vložíme komponenty a v kontroleru si metodou getJS s parametrem id elementu v HTML vložíme do stránky. Jak integrovat react-php-v8js do MVC frameworku ? Např. pro Symfony existuje dokonce nějaký bundle, ale to už je opravdu velký experiment, míchání JS s PHP a složitá instalace, aktualizace.