Fermer

janvier 21, 2023

Librement couplé : intégrez React JS dans les sites Drupal

Librement couplé : intégrez React JS dans les sites Drupal


React est une bibliothèque JavaScript qui facilite la création d’interfaces utilisateur interactives. Malheureusement, intégrer React dans un site Drupal n’est pas simple. Dans cet article, je vais vous montrer des méthodes relativement simples pour le faire.

React peut être intégré à Drupal de 2 manières :

  1. Entièrement découplé
  2. Partiellement découplé (relâchement couplé)

Entièrement découplé

Dans un CMS entièrement découplé, le le front-end et le back-end sont séparés. Nous pouvons également appeler cela « Drupal sans tête ».

Le CMS Drupal gère le back-end. Dans un premier temps, nous devons configurer notre Drupal, construire l’architecture du contenu, puis exposer ces données sous la forme d’une API de service Web.

Une fois que nous sommes prêts avec l’API JSON exposant les données requises, nous devons maintenant configurer notre frontal (React) pour consommer ces API et afficher les données dans l’application. Cela peut être fait en utilisant create-react-app ou en réagissant la configuration du webpack et axios pour les API.

Partiellement découplé (relâchement couplé)

Cette approche rendra votre application React dans un bloc Drupal. Vous pouvez également mettre le composant React dans le thème. Cette méthode vous permettra d’inclure des packages tiers de npm, d’adapter votre application à de nombreux fichiers et composants, d’activer l’édition en direct en mode développement et d’optimiser les choses pour la vitesse et la compatibilité.

N’UTILISEZ PAS CREATE-REACT-APP

Create-react-app est un bel outil qui génère un échafaudage pour une application React. Il configure une application Web moderne en exécutant une seule commande. Mais lorsque nous devons créer des blocs de réaction à intégrer dans Drupal, créer-réagir-app n’est pas si génial. Par exemple, nous n’avons pas besoin d’un dossier public fourni par create-react-app dans ce cas, car tout cela est géré par la modélisation Drupal twig. De plus, nous n’avons pas besoin de toutes les dépendances préinstallées.

CE QU’IL FAUT FAIRE

But

Connectez un « Hello World! » Réagissez l’application à un thème ou à un module Drupal.

Étape 1 : Créer un module personnalisé

Dans votre dossier de module personnalisé (/modules/custom), créez un nouveau dossier pour le module personnalisé. Appelons-le réagir_module.

Dans le dossier react_module, ajoutez un réagir_module.info.yml fichier pour enregistrer votre module.

name: React Module
description: Module for React code
package: Custom
core: 8.x
core_version_requirement: ^8 || ^9
type: module

Étape 2 : Activer le nouveau module

Activez le module en accédant à Étendre (/admin/modules) dans le menu Gérer l’administration.

Étape 3 : Configurer l’application React

  • Initialiser un nouveau projet de réaction à l’intérieur /modules/custom/react_module/js/react-app.
npm init

Cela générera un package de base.json. Nous placerons tout le code de réaction dans ce dossier.

  • Ensuite, nous voulons installer la dernière version stable de node :
nvm install node
node -v > .nvmrc
  • Nous devons maintenant installer tous les packages requis.

Dépendances de développement :

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Dépendances de production :

npm install react react-dom

Cela va dans un fichier appelé webpack.config.js.

const path = require('path');

const config = {
  entry: './src/index.js',
  devtool: (process.env.NODE_ENV === 'production') ? false : 'inline-source-map',
  mode: (process.env.NODE_ENV === 'production') ? 'production' : 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
};

module.exports = config;

Nous configurons ici un processus qui prendra notre fichier source index.js et le fera passer par différentes étapes de construction qui produiront finalement un seul fichier .js optimisé.

Cela indique à Webpack de faire un développement (watch) ou une production (build) construire.

"scripts": {
  "build": "NODE_ENV=production webpack",
  "watch": "webpack --watch --progress"
}

Configurez comment Babel fonctionne dans package.json.

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "IE >= 11",
            "last 3 versions"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ]
}

Après avoir suivi ces étapes, vous êtes prêt à demander à Babel de transpiler votre JavaScript afin que vous puissiez utiliser les fonctionnalités JSX et ES6+ dans votre code. Webpack regroupera votre code personnalisé avec les bibliothèques React et ReactDOM requises, ainsi que toutes les autres bibliothèques que vous incluez à l’aide de npm, dans un seul ensemble JavaScript.

Étape 4 : Créer une application React de base

Mettez ceci dans src/index.js. Vous pouvez ajouter d’autres composants dans le rendu et adapter votre application à de nombreux fichiers et composants.

import React from 'react';
import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(
  <h2>Hello world!</h2>
);

root.rendre() (c’est-à-dire dom virtuel) recherchera un élément HTML avec l’ID react-root et le remplacera par le balisage HTML produit par votre code React. Ceci est également connu sous le nom de liaison de l’application React au DOM.

Étape 5 : incluez votre application React dans Drupal

  • Définissez une bibliothèque pour votre application React.

Dans votre module, ajoutez un react_module.libraries.yml dossier comme suit :

react-lib:
  version: 1.x
  js:
    js/react-app/dist/app.bundle.js: { minified: true }
  • Incluez la bibliothèque Drupal de l’application React et le balisage cible sur une page. L’application React se placera dans la div react-root puisque nous avons utilisé document.getElementById(‘react-root’) à l’étape 4.

Il existe plusieurs façons de procéder.

i) Utilisation d’un modèle de brindille (page, bloc, région, etc.) :

{{ attach_library('react_module/react-lib') }}
<div id="react-root"></div>

ii) Vous pouvez également utiliser un tableau de rendu pour intégrer l’application. Par exemple, si vous voulez faire des choses à partir d’un modifier la forme:

$form['my_react_app'] = [
  '#markup' => '<div id="react-root"></div>',
  '#attached' => [
    'library' => [
      'react_module/react-lib'
    ],
  ],
];

iii) Définir un plugin de bloc

Cela produira l’élément DOM auquel se lier et attachera la bibliothèque d’actifs d’application React à ce bloc. Ensuite, chaque fois que le bloc apparaît sur la page, l’application React se charge.

Placez ceci dans modules/react_module/src/Plugin/Block/ReactBlock.php:

<?php
namespace Drupal\react_module\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'ReactBlock' block.
 *
 * @Block(
 * id = "react_block",
 * admin_label = @Translation("React block"),
 * )
 */
class ReactBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [];
    $build['react_block'] = [
      '#markup' => '<div id="react-root"></div>',
      '#attached' => [
        'library' => 'react_module/react-lib'
      ],
    ];
    return $build;
  }
}

Effacer le cache Drupal et le bloc sera disponible pour être placé dans n’importe quelle région. Aller à /admin/structure/bloc et cliquez sur « place block » dans la région de la barre latérale et recherchez « React Block ». Placez le bloc et il sera disponible sur la page.

Étape 6 : exécuter

Exécutons une version de développement de l’intérieur /modules/custom/react_module/js/react-app:

npm run watch

L’exécution de cette commande exécutera le regarder les scripts de construction dans package.json (étape 3). Il écoutera les modifications apportées à l’un des fichiers dans src et reconstruire automatiquement les actifs dans dist/app.bundle.js.

Ouvrir/Recharger la page contenant la div cible depuis brindille ou formulaire (Étape 5). Vous devriez voir le message « Hello world! » texte dans la div cible.

Pour créer la version de production, exécutez :

npm run build

Faites-le chaque fois que vous êtes prêt à déployer vos modifications, puis validez les fichiers mis à jour dans Git.

Structure finale du dossier :

+-- react_module
| +-- react_app.info.yml
| +-- react_app.libraries.yml
| +-- react_app.module (Defines Drupal hooks like hook_page_attachments or hook_form_alter)
| +-- js
| | +-- custom.js (Defines Drupal Behaviors)
| | +-- react-app
| | | +-- dist/
| | | | +-- app.bundle.js
| | | +-- node_modules/
| | | +-- src
| | | | +-- index.js
| | | +-- package.json
| | | +-- package-lock.json
| | | +-- webpack.config.js

Note: Si l’une des modifications n’est pas répercutée lors de l’actualisation de la page, essayez vider le navigateur ou le cache Drupal.

Plus loin pour votre compréhension

  • Essayez d’ajouter un composant React à la page via un thème personnalisé.




Source link