Jak používat React s Drupal?
Z tohoto důvodu vám umožňuje vytvářet poutavá, interaktivní a rychlá rozhraní, která se budou uživatelům líbit. Drupal je naopak velmi rychlý a upravitelný správce obsahu.
V tomto článku budeme hovořit o dvou různých kombinacích těchto dvou technologií.
Srovnání Headless Drupal a vloženého Reactu
Nejprve se můžeme bavit o dvou různých možnostech při používání Reactu s Drupalem. První možností je ta, kde je Drupal pouze na straně backendu a React vytváří celý frontend. V tomto případě musí být veškeré struktury používané pro frontend přeloženy do aplikace s pomocí Reactu. Jako druhou možnost můžeme umístit aplikaci React kdekoli v Drupalu. Tyto dvě možnosti budeme podrobněji rozebírat v další části článku.
Headless Drupal & React Frontend
V této situaci je Drupal používán na straně backendu a pracuje nezávisle na svém vlastním rozhraní. React vytváří celý frontend. Systémy jsou naprosto stejné. Komunikace probíhá pomocí technologií jako JSON:API nebo GraphQL přes REST.
- Můžete vytvořit Progressive Web App (PWA) pro uživatele na mobilních zařízeních.
- Můžete vytvořit jednostránkovou aplikaci, která ukládá data do Drupalu.
- Představte si, že máte rozsáhlý CRM systém postavený na Drupalu a máte agenty, kteří chtějí spravovat vaše místní obchody. Tyto agentury mohou potřebovat rozhraní pro správu CRM, které mohou používat bez zmatků. V tomto případě můžete použít Headless Drupal & React Frontend pro rozhraní přesně podle jejich potřeb.
- Můžete vytvořit menší webové stránky, které načítají některá data z velkého webu. Například můžete zobrazit pouze zprávy z určitých kategorií velkého novinového magazínu.
Jak vytvořit Headless Drupal?
Pokud jste se rozhodli pro Headless Drupal, budete potřebovat vytvořit samostatnou aplikaci React, která komunikuje pomocí HTTP požadavků. Protože Reactu nezáleží na tom, co se děje na backendové straně, mělo by být dostatečné, aby API správně fungovalo.
Facebook vytvořil projekt React, který vám pomůže začít. (React Starter Project)
Můžete propojit Drupal 8 a React tak, aby vytvořili Headless Drupal pomocí jednoho z následujících způsobů.
- (Doporučeno) Určitě se podívejte na modul JSON:API. S tímto modulem můžete vytvářet čisté body koncových bodů pro entity prostřednictvím uživatelského rozhraní. Tento modul je také zahrnut v Drupalu 8.7 a vyšším, stačí jej aktivovat pro jeho používání. (JSON:API Document)
- Pokud chcete, existuje také modul GraphQL ve vývoji, který můžete použít v kombinaci s Drupal a React (GraphQL Modul)
Pokud chcete vidět ukázkový projekt Headless Drupal, nezapomeňte se podívat na ContentaCMS. Můžete si také prohlédnout React verzi ContentaCMS zde.
React aplikace vložená do Drupal
Nemusíte vždy mít Headless aplikaci. Ale někdy můžete chtít mít na některých stránkách silně interaktivní prvky. V tomto případě má mnohem větší smysl vytvořit komponentu podobnou této a použít React.js vložený do stránky vytvořené na straně Drupal.
Jak vytvořit React aplikaci vloženou do Drupal?
Za prvé, měli byste přidat knihovnu React do svého webu. (Stejně jako byste přidali jakoukoli jinou JS knihovnu.) Existují způsoby, jak můžete přidat JS knihovnu do svého webu, v závislosti na tom, zda je skript vyžadován na každé stránce, nebo zda je součástí tématu nebo modulu. Podrobnosti naleznete na následujících dvou odkazech.
Existuje metoda, která není doporučována, ale může být rychleji spuštěna pro testovací účely než výše uvedená metoda. Můžete přidat následující řádky mezi značky head v souboru html.html.twig.
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>Měli byste také přidat soubor vaší aplikace přímo pod kód výše, následovně:
<script src="/path/to/my/scripts/benim-react-uygulamam.js"></script>Poté musíte přidat html tag na jakoukoli stránku Drupal, aby vaše React aplikace mohla být zpracována na straně rozhraní.
<div id="benim-react-uygulamam" />V souboru my-react-application.js musíte vytvořit svou aplikaci. V kódu níže najdete příklad.
ReactDOM.render(
React.createElement(MyApp, {title: 'Merhaba Dünya!'}),
document.getElementById('benim-react-uygulamam');
);
Nyní jste připraveni, máte React aplikaci vloženou na stránku Drupal. Můžete však buď získat data z REST API, podobně jako v příkladu Headless Drupal, nebo můžete použít globální proměnnou drupalSettings jako vaši první sadu dat.
function Welcome(props) {
if(props.isfront == true) {
return <h2>Anasayfaya hoşgeldiniz<h2>
}
else{
return <h2>Diğer sayfalardan birine hoşgeldiniz</h2>
}
ReactDOM.render(
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),
document.getElementById('benim-react-uygulamam');
);Upozorňujeme, že pokud chcete provádět změny v datech v Drupalu, stále je třeba používat API a přenášet změny tam.
