Wie man React mit Drupal verwendet

10.07.2018

React.js ist ein sehr beliebtes JavaScript-Framework, das von Facebook erstellt wurde. Es ermöglicht Ihnen, wunderschöne, interaktive und schnelle Benutzeroberflächen zu erstellen, in die sich Benutzer verlieben werden. Drupal hingegen ist ein fantastisches CMS, mit dem Sie kleine, mittlere und große Websites erstellen können.

Manchmal möchten Sie die beiden Frameworks zusammen verwenden - ein anspruchsvolles Drupal Backend anbieten und ein elegantes, schnelles Frontend auf Basis von React. Das ist der Moment, in dem Drupal und React zusammenkommen können.

In diesem Artikel werde ich verschiedene Methoden der Kombination dieser Technologien erläutern.

Headless Drupal vs. Eingebettetes React

Die grundlegende Entscheidung, die Sie treffen müssen, wenn Sie React mit Drupal verwenden, ist, ob Sie einen "headless Drupal"-Ansatz wählen möchten, bei dem Drupal nur im Backend vorhanden ist und React die einzige Benutzeroberfläche ist, die der Nutzer je sieht, oder ob Sie einfach nur eine React-Anwendung zur von Drupal gerenderten Website hinzufügen möchten. Lassen Sie mich das näher ausführen.

Headless Drupal mit React-Frontend

In einem kopflosen Szenario dient Drupal als Backend für eine in React erstellte Frontend-Anwendung. Die Systeme sind vollständig getrennt und kommunizieren über HTTP - z.B. REST oder GraphQL.

Diese Option ist am besten, wenn Sie:

Eine Progressive Web App (PWA) für Benutzer auf mobilen Geräten erstellen möchten.
Eine einseitige App erstellen möchten, die Daten in Drupal speichert
Einen einfach zu verwendenden Zugangspunkt zu einem Teil eines großen Systems auf Basis von Drupal erstellen möchten. Zum Beispiel, wenn Sie lokale Agenten haben, die lokale Geschäfte besuchen und Screenshots der Warenpräsentation senden. Sie benötigen möglicherweise nur eine einfach zu bedienende Schnittstelle, ohne die Komplexität Ihres gesamten CRM zur Geschäftsverwaltung, das im Büro genutzt wird
Eine kleinere Website erstellen möchten, die nur einige Daten von einer großen Website abruft, z.B. nur Nachrichten aus einem Abschnitt eines riesigen Nachrichtenmagazins anzeigt.

Wie man eine Headless Drupal-App erstellt

Wenn Sie sich für headless Drupal entscheiden, bauen Sie dann eine separate React-Anwendung, die über HTTP-Anfragen mit dem Backend kommuniziert, genau wie bei jedem Backend-System. React interessiert sich dann nicht wirklich dafür, was im Hintergrund abläuft. Es muss nur die bereitgestellte API nutzen können.

Facebook hat ein fantastisches Boilerplate React-Projekt vorbereitet, um Ihnen den Einstieg zu erleichtern.

Wenn die React-App läuft, erstellen Sie dann Endpunkte in Drupal, die als Datenquellen für Ihre React-App dienen. Drupal 8 ist ein fantastisches Softwarestück und wird mit einer vollständigen REST-API ausgeliefert. Sie können in der Drupal REST-API Dokumentation mehr erfahren. Schauen Sie sich speziell das REST UI-Modul an, das es Ihnen ermöglicht, saubere konfigurierbare Endpunkte für Entitäten zu erstellen.
Wir haben einen großartigen Beitrag zum Einrichten von REST-Endpunkten für eine JavaScript-Anwendung geschrieben.

Wenn Sie GraphQL bevorzugen, gibt es ein GraphQL-Modul, das aktiv entwickelt wird und Ihnen erlaubt, GraphQL-Endpunkte zu erstellen.

Wenn Sie an einem headless Drupal interessiert sind, lohnt es sich auch, sich ein Beispielprojekt für headless-Projekte anzusehen: das ContentaCMS, das eine vollständig headless Implementierung von Drupal mit beliebten Frontend-Frameworks darstellt. Die React-Implementierung können Sie sich hier ansehen.

React-App in Drupal eingebettet

Oftmals benötigen Sie keine vollständige kopflose Implementierung, sondern möchten nur ein oder zwei hochinteraktive Elemente auf einigen Seiten Ihrer Website. Es könnte sich um ein sehr kompliziertes Formular mit vielen Schritten handeln, das ohne Seitenaktualisierung besser funktioniert, oder um ein anderes UI-Element, das hochinteraktiv ist und mit JavaScript viel besser funktioniert.

In diesem Fall ist es viel sinnvoller, React.js zu verwenden, um eine Komponente zu erstellen und sie in eine von Drupal bereitgestellte Seite einzubetten. Auf diese Weise können Sie die gesamte Drupal-Großartigkeit überall sonst nutzen, zum Beispiel Registrierung, Feld-Rendering, Ansichten usw.

Wie man eine React-App in Drupal einbettet

Zuerst fügen Sie die React-Bibliothek zu Ihrer Website hinzu, genauso wie Sie eine andere js-Bibliothek hinzufügen würden (z.B. eine jQuery oder eine andere Bibliothek für einen Slider oder eine Galerie). Abhängig davon, ob das Skript auf jeder Seite erforderlich ist oder Teil eines Themes oder Moduls ist, gibt es verschiedene Möglichkeiten, wie Sie eine js-Bibliothek zur Website hinzufügen können. Ich werde nicht ins Detail gehen, da es hier viele gute Dokumentationen gibt:
1. https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module
und
2. https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Eine schnelle Methode, die nicht empfohlen wird, aber zu Testzwecken funktioniert, besteht darin, die Skript-Tags einfach zu html.html.twig in Ihrem Template hinzuzufügen:

und Ihr eigenes Skript mit der App.

Ein Nachteil einer eingebetteten App ist, dass Sie nur JavaScript verwenden können. Sie können weder JSX noch TypeScript verwenden, die Sie möglicherweise bei der Erstellung einer kopflosen App verwenden würden. Dies liegt daran, dass in einer vollständigen React-App Webpack oder Babel JSX oder TypeScript in JavaScript umwandeln. Hier in unserem Beispiel verwenden wir der Einfachheit halber diese Werkzeuge nicht.

Tipp: Um JSX verwenden zu können, müssten Sie zuerst Webpack verwenden, um Ihre JavaScript-Datei zu kompilieren und dann zu Drupal hinzuzufügen. Ein guter Ansatz wäre dann, das create-react-app-Repo zu verwenden, um zu starten und dann einfach die resultierende js-Datei nach der Transpilation zu kopieren und einzubetten. Sie müssten dann React.js nicht separat einbetten, da es bereits in der Transpilation gebündelt ist. Das Einrichten, so dass die automatische Aktualisierung funktioniert und die Datei zu Drupal kopiert wird, ist jedoch etwas komplizierter, daher überspringen wir es.

Zurück zu unserem Beispiel: Das erste, was Sie erstellen müssen, ist ein HTML-Tag in Ihrem Markup, in dem die React-App leben wird. Es kann sich um ein Div handeln, das in einem Block oder von einem benutzerdefinierten Controller auf einer separaten Route gerendert wird.

Erstellen Sie in myractapp.js Ihre App.

ReactDOM.render(
React.createElement(MyApp, {title: 'Hello World!'}),
  document.getElementById('myreactapp');
);

Fertig! Sie haben eine React-App in eine Drupal-Seite eingebettet. Sie können Daten dafür von einer REST-API abrufen, wie im kopflosen Beispiel, oder Sie können das globale drupalSettings für Ihren initialen Datensatz verwenden.

function Welcome(props) {
 if(props.isfront == true) {
return  Willkommen auf der Startseite
}
else{
return  Willkommen auf einer anderen Seite 
}

ReactDOM.render(
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),
    document.getElementById('myreactapp');
);

Denken Sie nur daran, dass Sie, wenn Sie jemals Änderungen an Daten in Drupal speichern möchten, immer noch einen Endpunkt erstellen müssen und die Änderungen dorthin pushen.

Das war's! Die Kombination aus React und Drupal ist so einfach wie Kuchen.
Viel Spaß!