Direkt zum Inhalt

Wie verwendet man React mit Drupal?

React.js ist ein Javascript-Framework, das von Facebook entwickelt wurde und sich einen Namen gemacht hat.
Samet Yaman
Samet Yaman
10 minuten lesen
Drupal ile React Nasıl Kullanılır?

Aus diesem Grund ermöglicht es Ihnen, ansprechende, interaktive und schnelle Oberflächen zu erstellen, die den Benutzern gefallen werden. Drupal hingegen ist ein sehr schnelles und editierbares CMS.

In diesem Artikel werden wir über zwei verschiedene Kombinationen dieser beiden Technologien sprechen.

Vergleich zwischen kopflosem Drupal und eingebettetem React

Zunächst einmal können wir über zwei verschiedene Optionen bei der Verwendung von React mit Drupal sprechen. Die erste ist die Option, bei der Drupal nur auf der Backend-Seite ist und React das gesamte Frontend erstellt. In diesem Fall müssen alle Strukturen, die für das Frontend verwendet werden, in eine Anwendung mit React übersetzt werden. Als zweite Option können wir eine React-Anwendung überall in Drupal platzieren. Diese beiden Optionen werden wir im weiteren Verlauf des Artikels näher erläutern.

Kopfloses Drupal & React Frontend

In diesem Szenario wird Drupal auf der Backend-Seite verwendet und arbeitet unabhängig von seiner eigenen Schnittstelle. React erstellt das gesamte Frontend. Die Systeme sind genau die gleichen. JSON:API oder GraphQL kommuniziert über REST.

  • Sie können eine Progressive Web App (PWA) für Benutzer auf mobilen Geräten erstellen.
  • In Drupal können Sie eine einseitige Anwendung erstellen, die Daten speichert.
  • Nehmen wir an, Sie haben ein großes CRM-System, das auf Drupal basiert, und Sie haben Vertreter, die Ihre lokalen Geschäfte verwalten wollen. Diese Agenturen benötigen möglicherweise eine Schnittstelle, die sie für die CRM-Verwaltung verwenden können, ohne dass es zu Verwirrungen kommt. In diesem Fall können Sie Headless Drupal & React Frontend für eine Schnittstelle verwenden, die genau auf ihre Bedürfnisse zugeschnitten ist.
  • Sie können eine kleinere Website erstellen, die einige Daten von einer großen Website abruft. Sie können zum Beispiel nur bestimmte Kategorien von Nachrichten aus einem großen Nachrichtenmagazin anzeigen.

Wie erstellt man ein kopfloses Drupal?

Wenn Sie sich für Headless Drupal entscheiden, müssen Sie eine separate React-Anwendung erstellen, die mit HTTP-Anfragen kommuniziert. Da sich React nicht darum kümmert, was auf der Backend-Seite passiert, sollte es ausreichen, dass die API ordnungsgemäß funktioniert.

Facebook hat ein React-Projekt erstellt, um Ihnen den Einstieg zu erleichtern. (React Başlangıç Projesi)

Sie können Drupal 8 und React auf eine der folgenden Arten als Headless Drupal kommunizieren.

  1. (Empfohlen) Werfen Sie unbedingt einen Blick auf das Modul JSON:API. Mit diesem Modul können Sie saubere Endpunkte für Entitäten über die Schnittstelle erstellen. Außerdem ist dieses Modul in Drupal 8.7 und höher enthalten. Aktivieren Sie einfach das Modul, um es zu verwenden. (JSON:API Dökümanı)
  2. Wenn Sie möchten, gibt es auch ein GraphQL-Modul in der Entwicklung, die Sie in Drupal Verbindung mit React verwenden können. (GraphQL Modülü)

React-Anwendung eingebettet in Drupal

Sie brauchen nicht immer eine Headless-Anwendung. Aber manchmal möchten Sie vielleicht sehr interaktive Elemente auf einigen Seiten. In diesem Fall ist es viel sinnvoller, eine Komponente wie diese zu erstellen und React.js eingebettet in eine auf der Drupal-Seite erstellte Seite zu verwenden.

Wie erstellt man eine in Drupal eingebettete React-Anwendung?

Zunächst sollten Sie die React-Bibliothek zu Ihrer Website hinzufügen (wie jede andere js-Bibliothek auch). Es gibt verschiedene Möglichkeiten, wie Sie eine js-Bibliothek zu Ihrer Website hinzufügen können, je nachdem, ob das Skript auf jeder Seite, als Teil eines Themas oder als Modul erforderlich ist. Die Details finden Sie unter den beiden unten stehenden Links.

  1. Add JavaScript to Your Theme or Module
  2. Adding Stylesheets (CSS) and JavaScript (JS)

Es gibt eine Methode, die nicht empfohlen wird, aber zu Testzwecken schneller ausgeführt werden kann als die obige Methode. Sie können die folgenden Zeilen zwischen den head-Tags in der Datei html.html.twig einfügen.

<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>

Sie sollten auch die Datei Ihrer Anwendung direkt unter dem obigen Code einfügen, wie unten dargestellt.

<script src="/path/to/my/scripts/benim-react-uygulamam.js"></script>

Dann müssen Sie den html-Tag zu jeder Drupal-Seite hinzufügen, damit Ihre React-Anwendung auf der Schnittstellenseite verarbeitet werden kann.

<div id="benim-react-uygulamam" />

In der Datei benim-react-uygulamam.js müssen Sie Ihre Anwendung erstellen, ein Beispiel finden Sie im folgenden Code.

ReactDOM.render(
React.createElement(MyApp, {title: 'Merhaba Dünya!'}),
  document.getElementById('benim-react-uygulamam');
);

Jetzt sind Sie bereit, eine React-Anwendung in eine Drupal-Seite einzubetten. Sie können jedoch entweder Daten von der REST-API abrufen, wie im Headless-Drupal-Beispiel, oder Sie können die globale Variable drupalSettings als ersten Datensatz verwenden.

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');
);

Beachten Sie, dass Sie, wenn Sie Änderungen an Daten in Drupal vornehmen wollen, immer noch eine API verwenden und die Änderungen dort übergeben müssen.

Unsere Büros

Drupart Locations

Unsere Buros

Wiesbaden

Hinterbergstraße 27
65207 Wiesbaden
Deutschland

+49 (0) 6151 – 492 70 23

[email protected]

London

151 West Green Road, London, England

+44 203 815 6478

[email protected]

Newark

112 Capitol Trail Suite, A437 Newark DE, 19711

+1 (740) 666 6255

[email protected]

Istanbul

GOSB Teknopark Hi-Tech Bina 3.Kat B3 Gebze - KOCAELİ

+49 (0) 6151 – 492 70 23

[email protected]