Cum să reacționezi rapid în Drupal

Înainte de a ajunge la „Cum”, să vorbim puțin despre „De ce” implementării React în Drupal. React, după cum știți, este o bibliotecă JavaScript bazată pe componente, foarte prietenoasă pentru dezvoltatori, care le permite dezvoltatorilor să construiască interfețe front-end complexe de înaltă calitate. Drupal este un cadru robust și puternic de gestionare a conținutului, care permite experiențe web flexibile și bazate pe conținut. Combinarea capacităților superioare de tematică front-end ale React cu cadrul puternic de back-end al Drupal vă poate permite să oferiți experiențe digitale performante și excepționale. Să aruncăm o privire mai atentă la crearea componentelor React în Drupal 9 .

Dar mai întâi, ce este React?

Prin definiție: „React este o bibliotecă JavaScript declarativă, eficientă și flexibilă pentru construirea de interfețe de utilizator frontend. Vă permite să compuneți interfețe de utilizare complexe din bucăți mici și izolate de cod numite componente .”

Dacă sunteți familiarizat cu Pattern Lab, ar trebui să vă fie ușor să înțelegeți blocurile de bază ale React. Începem cu blocurile de bază sau atomii unei pagini și ne evoluăm pentru a crea modele.

Mulți dezvoltatori preferă să folosească JSX pentru a scrie cod HTML în React. Citiți mai departe pentru a afla de ce.

De ce JSX pentru React

Stilul de codare și sintaxa lui React pot deveni complexe și nu sunt foarte prietenoase cu dezvoltatorii. După cum vedeți mai jos, așa este creat un element HTML în React.

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

Și așa scrieți aceeași funcție în React folosind JSX:

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

Folosind JSX, puteți specifica numele clasei, așa cum este menționat mai jos, folosind sintaxa XML predefinită „className”. După cum puteți vedea, este mult mai ușor, intuitiv și mai puțin verbos să scrieți același cod în JSX. Prin urmare, aproape întreaga comunitate React folosește JSX pentru a scrie codul React.

Ce este JSX? JSX înseamnă JavaScript XML. XML este o sintaxă foarte ușor de utilizat pentru dezvoltatori. JSX facilitează scrierea și adăugarea HTML în React.

Aruncă o privire la diferența dintre crearea de elemente în React vs Javascript. Veți observa cum React vă oferă mai multă flexibilitate pentru a scrie și accesa codul, făcându-l ușor de dezvoltat și de depanat.

Deși JSX facilitează scrierea codului de către dezvoltatori, nu este cel mai bun format de înțeles de către browsere. Din acest motiv, îl vom compila într-un format JavaScript obișnuit, care va fi oferit browserului.

Formulare de date React

Componentele React au două forme de date:

• Recuzită
◦ Recuzitele sunt proprietăți primite de la strămoși în ierarhia componentelor. Ele nu pot fi modificate sau mutate. De exemplu, pentru a trece o variabilă de la o componentă părinte la o componentă secundară, o puteți trece ca prop.
• Statul
◦ Starea este locală pentru o componentă și poate fi modificată de evenimente. De exemplu, dacă aveți o variabilă de stare (state.text), textul poate fi modificat în funcție de diferite acțiuni.

NOTĂ: Componentele copil pot primi atât valorile acelei stări, cât și evenimente pentru a actualiza acea stare prin elemente de recuzită

Cum se integrează React cu Drupal

Vom începe mai întâi prin a crea un modul personalizat și apoi fișierul JSX.
Acum să creăm modulul personalizat Drupal, așa cum se arată mai jos:
Creați module/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

Apoi, să creăm fișierul React așa cum se arată mai jos. Creăm un marcaj HTML cu o etichetă H1 care va fi tipărită în ID -ul aplicației react .

Creați module/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 );

Accesarea fișierului JSX de către Drupal

Acum, pentru ca Drupal să poată accesa și utiliza fișierul JSX pe care tocmai l-am creat, va trebui să configurați un lanț de instrumente JavaScript cu Webpack.

La un nivel înalt, configurăm un proces care va prelua fișierele noastre JavaScript sursă, cum ar fi index.jsx , și le va trece prin diferiți pași de compilare care vor scoate în cele din urmă un singur fișier .js optimizat. Acest pas de construire ne permite să profităm de întregul ecosistem React/JavaScript în timp ce lucrăm la modulul sau tema noastră Drupal.

Pașii de bază sunt:

• Configurați un lanț de instrumente care vă va procesa materialele JavaScript într-unul sau mai multe fișiere JavaScript „grupate” cu o locație cunoscută care nu se modifică
• Creați o bibliotecă de active Drupal care să trimită la activele grupate din lanțul de instrumente de construcție

Pasul 1: Instalați React, Webpack și Babel

Înainte de a le instala, va trebui să vă asigurați că aveți pregătite node și nmp în mediul dumneavoastră de dezvoltare. React este biblioteca Javascript. Babel și webpack sunt compilatoare de care aveți nevoie pentru a converti fișierul .jsx în javascript pentru browser. Babel este unul dintre cele mai bune compilatoare ale comunității pentru a compila fișiere .jsx. Pentru a instala React, Webpack și Babel, rulați următoarele comenzi din directorul rădăcină al temei modules/react/ , în terminalul dvs.

 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

Pasul 2: Configurați Webpack cu un fișier webpack.config.js

Creați un fișier webpack.config.js în rădăcina modulului dvs.: 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;

Pasul 3: Configurați Babel cu un fișier .babelrc

Furnizați o anumită configurație pentru Babel prin crearea unui fișier .babelrc cu următoarele presetări disponibile (care vor fi utilizate în timpul compilarii codului React) în directorul rădăcină al modulului: modules/react/.babelrc

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

Pasul 4: Adăugați câteva scripturi de ajutor la package.json

Acest lucru este necesar pentru a rula pachetul nmp, deoarece se referă întotdeauna la fișierul de bază package.json înainte de orice acțiune.

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

Pasul 5: Rulați build pentru a compila fișierele jsx într-un singur fișier js

Acum suntem gata să compilam fișierul JSX.

npm run build (SAU) npm run build:dev

Practic, aceasta compilează fișierul conform configurației din fișierul webpack.config și acum creează fișierul js compilat în depozitul menționat js/src/dist .

Pasul 6: Definiți o bibliotecă de active Drupal

Acum puteți adăuga fișierul JavaScript compilat ca activ Drupal în bibliotecă ( libraries.yml ).

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

Acum sunteți gata și pregătiți să creați câteva componente React interesante pe site-ul dvs. Drupal.

Iată cum arăta rezultatul meu final (mai jos). Puteți vedea blocul React pe care l-am creat cu o etichetă H1 „Hello Specbee”.

Gânduri finale

Nu a fost ușor? Când creați componente React în Drupal, asigurați-vă că aveți elementul React dom creat în Drupal (" react-app ") și atașați întotdeauna fișierul Javascript (pe care l-am compilat din fișierul React JSX) la biblioteca Drupal. Ți-a plăcut ceea ce tocmai ai citit? Ne străduim să publicăm conținut valoros pentru dvs. în fiecare săptămână. Abonați-vă la buletinul nostru informativ săptămânal pentru a fi la curent cu toate cele mai recente informații.