Comment utiliser React avec Drupal

10.07.2018

React.js est un framework JavaScript très populaire créé par Facebook. Il vous permet de créer des interfaces belles, interactives et rapides, avec lesquelles les utilisateurs vont tomber amoureux. Drupal, d'autre part, est un fantastique CMS avec lequel vous pouvez construire de petits, moyens et immenses sites web.

Parfois, vous voulez associer les deux frameworks - offrir un backend sophistiqué Drupal, et un frontend élégant et rapide basé sur React. C'est là que Drupal et React peuvent se compléter.

Dans cet article, j'explorerai différentes méthodes de combinaison de ces technologies.

Drupal sans tête vs. React intégré

Le choix principal que vous devez faire lorsque vous utilisez React avec Drupal est de savoir si vous voulez utiliser une approche "Drupal sans tête" où Drupal est uniquement en backend et React est la seule interface que l'utilisateur voit, ou si vous voulez simplement ajouter une application React au site Drupal rendu par le moteur de modèles de Drupal. Permettez-moi d'élaborer.

Drupal sans tête avec frontend React

Dans un scénario sans tête, Drupal sert de backend pour une application frontend construite en React. Les systèmes sont entièrement séparés et communiquent via HTTP - par exemple, REST ou GraphQL.

Cette option est idéale si vous voulez :

Créer une application web progressive (PWA) pour les utilisateurs sur les appareils mobiles.
Créer une application à page unique qui stocke des données dans Drupal.
Créer un point d'accès facile à utiliser à un sous-ensemble d'un grand système construit sur Drupal. Disons que vous avez des agents locaux qui visitent des magasins locaux et envoient des captures d'écran des présentoirs de marchandises. Ils pourraient avoir besoin seulement d'une interface facile à utiliser sans la complexité de votre CRM complet de gestion des magasins, que le bureau utilise.
Créer un petit site web qui extrait simplement des données d'un grand site, par exemple, n'afficher que des nouvelles d'une section d'un énorme magazine de presse.

Comment créer une application Drupal sans tête

Si vous choisissez Drupal sans tête, vous construisez alors une application React distincte qui communique avec le backend via des requêtes HTTP, comme vous le feriez avec n'importe quel système backend. React ne se soucie pas vraiment de ce qui est dans le backend. Il a seulement besoin de pouvoir utiliser l'API exposée.

Facebook a préparé un fantastique modèle de projet React pour vous aider à démarrer.

Lorsque l'application React est en cours d'exécution, vous créez alors des points de terminaison dans Drupal, qui servent de sources de données pour votre application React. Drupal 8 est un fantastique logiciel et est livré avec une API REST complète. Vous pouvez trouver la documentation sur la page de documentation de l'API REST de Drupal. Consultez particulièrement le module REST UI qui vous permet de créer des points de terminaison configurables clairs pour les entités.
Nous avons écrit un excellent article sur la configuration des points de terminaison REST pour une application JavaScript.

Si vous préférez utiliser GraphQL, il existe un module GraphQL qui est en développement actif et vous permet de créer des points de terminaison GraphQL.

Si Drupal sans tête est ce que vous recherchez, il vaut également la peine de vérifier un projet sans tête d'exemple : le ContentaCMS, qui est une implantation entièrement sans tête de Drupal avec des frameworks frontend populaires. L'implémentation React peut être inspectée ici.

Application React intégrée dans Drupal

Il arrive souvent que vous n'ayez pas besoin d'une implémentation sans tête complète, mais que vous souhaitiez simplement ajouter un ou deux éléments hautement interactifs sur quelques pages de votre site. Cela pourrait être un formulaire très compliqué avec de nombreuses étapes qui fonctionne mieux sans rechargement de page ou un autre élément d'interface utilisateur qui est hautement interactif et fonctionne beaucoup mieux en fait en JavaScript.

Dans ce cas, il est beaucoup plus logique d'utiliser React.js pour créer un composant et l'intégrer dans une page qui est servie par Drupal. De cette façon, vous pouvez utiliser toute la richesse de Drupal partout ailleurs, par exemple pour l'inscription, le rendu des champs, les vues, etc.

Comment intégrer une application React dans Drupal

Pour commencer, vous ajouterez la bibliothèque React à votre site, tout comme vous ajouteriez n'importe quelle autre bibliothèque JS (par exemple, jQuery ou une autre bibliothèque pour un curseur ou une galerie). Selon que le script est requis sur chaque page, ou s'il fait partie d'un thème ou d'un module, il existe différentes manières d'ajouter une bibliothèque JS au site. Je ne vais pas entrer dans les détails, car il y a beaucoup de bonnes documentations ici :
1. https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module
et
2. https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Une méthode rapide, qui n'est pas recommandée, mais qui fonctionnera à des fins de test, consiste à simplement ajouter les balises de script à html.html.twig dans votre modèle :

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

et votre propre script avec l'application.

<script src="/paht/to/my/scripts/myreactapp.js"></script>

Un inconvénient d'une application intégrée est que la seule langue que vous pouvez utiliser est JavaScript. Vous ne pouvez utiliser ni JSX, ni TypeScript, que vous pourriez utiliser lorsque vous créez une application sans tête. En effet, dans une application React complète, Webpack ou Babel transpilent JSX ou TypeScript en JavaScript. Ici, dans notre exemple, pour des raisons de simplicité, nous n'utilisons pas ces outils.

Conseil : Pour pouvoir utiliser JSX, vous devriez utiliser Webpack d'abord pour compiler votre fichier JavaScript puis l'ajouter à Drupal. Une bonne approche serait donc d'utiliser le dépôt create-react-app pour démarrer puis copier simplement le fichier JS résultant créé après la transpilation et l'intégrer. Vous n'auriez alors pas besoin d'intégrer react.js séparément car il est déjà intégré dans la transpilation. Configurer cela, cependant, afin que l'actualisation automatique fonctionne et que le fichier soit copié dans Drupal, est un peu plus compliqué et c'est pourquoi nous l'omettons.

Pour revenir à notre exemple, la première chose que vous devez créer est une balise HTML dans votre balisage dans laquelle l'application React vivra. Il peut s'agir d'un div rendu dans un bloc ou par un contrôleur personnalisé sur une route distincte.

<div id="myreactapp" />

Dans myreactapp.js créez votre application.

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

Fait ! Vous avez une application React intégrée à une page Drupal. Vous pouvez obtenir des données pour elle à partir d'une API REST comme vous le feriez dans l'exemple sans tête, ou vous pouvez utiliser le global drupalSettings pour votre ensemble de données initial.

function Welcome(props) {
 if(props.isfront == true) {
return <h2>Welcome on front page</h2>
}
else{
return <h2>Welcome on another page</h2>
}

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

N'oubliez pas que si vous voulez un jour enregistrer des modifications sur des données dans Drupal, vous devez toujours créer un point de terminaison et y pousser les modifications.

Voilà ! Combiner React et Drupal est aussi facile que de faire une tarte.
Profitez-en !