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.
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.
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.
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.
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.
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.
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.
GOSB Teknopark Hi-Tech Bina 3.Kat B3 Gebze - KOCAELİ