Comment réagir rapidement dans Drupal

Avant d'aborder le "Comment", parlons un peu du "Pourquoi" de l'implémentation de React dans Drupal. React, comme vous le savez, est une bibliothèque JavaScript basée sur des composants très conviviale pour les développeurs qui permet aux développeurs de créer des interfaces frontales complexes de haute qualité. Drupal est un cadre de gestion de contenu robuste et puissant qui permet des expériences Web flexibles et axées sur le contenu. La combinaison des capacités supérieures de thématisation frontale de React avec le puissant framework back-end de Drupal peut vous permettre de proposer des expériences numériques performantes et exceptionnelles. Examinons de plus près la création de composants React dans Drupal 9 .

Mais d'abord, qu'est-ce que React ?

Par définition : « React est une bibliothèque JavaScript déclarative, efficace et flexible pour créer des interfaces utilisateur frontales. Il vous permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés composants .

Si vous connaissez Pattern Lab, il devrait vous être facile de comprendre les éléments de base de React. Nous commençons par les blocs de construction de base ou les atomes d'une page et progressons pour créer des conceptions.

De nombreux développeurs préfèrent utiliser JSX pour écrire du code HTML dans React. Lisez la suite pour savoir pourquoi.

Pourquoi JSX pour React

Le style de codage et la syntaxe de React peuvent devenir complexes et ne sont pas très conviviaux pour les développeurs. Comme vous le voyez ci-dessous, voici comment un élément HTML est créé dans React.

 const element = React.createElement ( 'h1', {className: 'greeting'}, 'Hello, world!' );

Et voici comment vous écrivez la même fonction dans React en utilisant JSX :

 const element = <h1 className="greeting">Hello World!</h1>

En utilisant JSX, vous pouvez spécifier le nom de la classe comme mentionné ci-dessous en utilisant la syntaxe XML prédéfinie "className". Comme vous pouvez le constater, il est beaucoup plus facile, intuitif et moins verbeux d'écrire le même code en JSX. Par conséquent, presque toute la communauté React utilise JSX pour écrire du code React.

Qu'est-ce que JSX ? JSX signifie JavaScript XML. XML est une syntaxe très conviviale pour les développeurs. JSX facilite l'écriture et l'ajout de HTML dans React.

Jetez un œil à la différence entre la création d'éléments dans React et Javascript. Vous remarquerez que React vous donne plus de flexibilité pour écrire et accéder au code, ce qui facilite le développement et le débogage.

Bien que JSX facilite l'écriture de code pour les développeurs, ce n'est pas le meilleur format à comprendre pour les navigateurs. Pour cette raison, nous le compilerons dans un format JavaScript standard qui sera servi au navigateur.

Réagissez aux formulaires de données

Les composants React ont deux formes de données :

• Accessoires
◦ Les accessoires sont des propriétés reçues des ancêtres dans la hiérarchie des composants. Ils ne peuvent pas être changés ou mutés. Par exemple, pour transmettre une variable d'un parent à un composant enfant, vous pouvez la transmettre en tant que prop.
• État
◦ L'état est local pour un composant et peut être modifié par des événements. Par exemple, si vous avez une variable d'état (state.text), le texte peut être modifié en fonction de différentes actions.

REMARQUE : les composants enfants peuvent recevoir à la fois les valeurs de cet état et des événements pour mettre à jour cet état via des accessoires.

Comment intégrer React à Drupal

Nous allons d'abord commencer par créer un module personnalisé, puis le fichier JSX.
Créons maintenant le module personnalisé Drupal comme indiqué ci-dessous :
Créer modules/react/react.info.yml

 web > modules > react > ! react.info.yml 1 name: React 2 type: module 3 description: 'A module for basic React components.' 4 core_version_requirement: *8.7.7 || ^9

Ensuite, créons le fichier React comme indiqué ci-dessous. Nous créons un balisage HTML avec une balise H1 qui sera imprimée dans l'identifiant de l' application de réaction .

Créer modules/react/js/src/index.jsx

 web > modules > react > js > src > # index.jsx 1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 4 ReactDOM. render( 5 <h1>Hello there - world!</h1>, 6 document. getElementById( ' react—app') 7 );

Accéder au fichier JSX par Drupal

Maintenant, pour que Drupal puisse accéder et utiliser le fichier JSX que nous venons de créer, vous devrez configurer une chaîne d'outils JavaScript avec Webpack.

À un niveau élevé, nous configurons un processus qui prendra nos fichiers JavaScript source, comme index.jsx , et les fera passer par différentes étapes de construction qui produiront finalement un seul fichier .js optimisé. Cette étape de construction nous permet de tirer parti de l'ensemble de l'écosystème React/JavaScript tout en travaillant sur notre module ou thème Drupal.

Les étapes de base sont :

• Configurez une chaîne d'outils qui traitera vos actifs JavaScript dans un ou plusieurs fichiers JavaScript "groupés" avec un emplacement connu qui ne change pas
• Créez une bibliothèque de ressources Drupal qui pointe vers les ressources groupées de votre chaîne d'outils de construction

Étape 1 : Installez React, Webpack et Babel

Avant de les installer, vous devrez vous assurer que node et nmp sont prêts dans votre environnement de développement. React est la bibliothèque Javascript. Babel et webpack sont des compilateurs dont vous avez besoin pour convertir le .jsx en javascript pour le navigateur. Babel est l'un des meilleurs compilateurs communautaires pour compiler les fichiers .jsx. Pour installer React, Webpack et Babel, exécutez les commandes suivantes depuis le répertoire racine de votre thème modules/react/ , dans votre terminal

 1 # Create a package.json if you don't have one already. 2 npm init -y 3 # Install the required dependencies 4 npm install —-save react react-dom prop—types 5 npm install —-save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Étape 2 : Configurer Webpack avec un fichier webpack.config.js

Créez un fichier webpack.config.js à la racine de votre module : modules/react/webpack.config.js

 1 const path = require('path'); 2 3 const config = { 4 entry: { 5 main: ["./js/src/index.jsx"] 6 }, 7 devtool:'source-map', 8 mode:'development', 9 output: { 10 path: path.resolve(__dirname, "js/dist"), 11 filename: '[name].min.js' 12 }, 13 resolve: { 14 extensions: ['.js', '.jsx'], 15 }, 16 module: { 17 rules: [ 18 { 19 test: /\.jsx?$/, 20 loader: 'babel-loader', 21 exclude: /node_modules/, 22 include: path.join(__dirname, 'js/src'), 23 } 24 ], 25 }, 26 }; 27 28 module.exports = config;

Étape 3 : Configurer Babel avec un fichier .babelrc

Fournissez une configuration pour Babel en créant un fichier .babelrc avec les préréglages facilement disponibles suivants (qui seront utilisés lors de la compilation du code React) dans le répertoire racine du module : modules/react/.babelrc

 web > modules > react > .babelrc >... 1 { 2 "presets": [ 3 "@babel/preset-env", 4 "@babel/preset-react" 5 ] 6 }

Étape 4 : Ajoutez des scripts d'assistance à package.json

Ceci est nécessaire pour exécuter votre package nmp car il fait toujours référence au fichier de base package.json avant toute action.

 > Debug "scripts": { "build": "webpack", "build:dev": "webpack", "start": “webpack —-watch" },

Étape 5 : Exécutez la compilation pour compiler les fichiers jsx dans le seul fichier js

Nous sommes maintenant prêts à compiler le fichier JSX.

npm run build (OU) npm run build:dev

Fondamentalement, cela compile le fichier selon la configuration dans le fichier webpack.config et maintenant il crée le fichier js compilé dans le référentiel mentionné js/src/dist .

Étape 6 : Définir une bibliothèque de ressources Drupal

Vous pouvez maintenant ajouter le fichier JavaScript compilé en tant qu'actif Drupal dans la bibliothèque ( library.yml ).

 web > modules > react > ! react.libraries.yml 1 react_app: 2 version: 1.0 3 js: 4 js/dist/main.min.js: {minified: true}

Vous êtes maintenant prêt à créer des composants React sympas sur votre site Web Drupal.

Voici à quoi ressemblait mon résultat final (ci-dessous). Vous pouvez voir le bloc React que j'ai créé avec une balise H1 "Hello Specbee".

Dernières pensées

N'était-ce pas facile ? Lors de la création de composants React dans Drupal, assurez-vous que l'élément React dom est créé dans Drupal (' react-app ') et attachez toujours le fichier Javascript (que nous avons compilé à partir du fichier React JSX) à la bibliothèque Drupal. Vous avez aimé ce que vous venez de lire ? Nous nous efforçons de publier du contenu précieux pour vous chaque semaine. Abonnez-vous à notre newsletter hebdomadaire pour rester informé de toutes nos dernières informations.