Cómo reaccionar rápidamente en Drupal

Antes de llegar al "Cómo", hablemos un poco sobre el "Por qué" de implementar React en Drupal. React, como sabe, es una biblioteca de JavaScript basada en componentes muy amigable para los desarrolladores que permite a los desarrolladores crear interfaces front-end complejas y de alta calidad. Drupal es un marco de gestión de contenido robusto y potente que permite experiencias web flexibles y basadas en contenido. La combinación de las capacidades superiores de creación de temas de front-end de React con el poderoso marco de back-end de Drupal puede permitirle ofrecer experiencias digitales excepcionales y de alto rendimiento. Echemos un vistazo más de cerca a la creación de componentes React en Drupal 9 .

Pero primero, ¿qué es React?

Por definición: “React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario frontend. Le permite crear interfaces de usuario complejas a partir de fragmentos de código pequeños y aislados denominados componentes .

Si está familiarizado con Pattern lab, debería ser fácil para usted comprender los componentes básicos de React. Comenzamos con los bloques de construcción básicos o átomos de una página y avanzamos para crear diseños.

Muchos desarrolladores prefieren usar JSX para escribir código HTML en React. Siga leyendo para averiguar por qué.

Por qué JSX para React

El estilo de codificación y la sintaxis de React pueden volverse complejos y no son muy fáciles de usar para los desarrolladores. Como puede ver a continuación, así es como se crea un elemento HTML en React.

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

Y así es como escribes la misma función en React usando JSX:

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

Usando JSX puede especificar el nombre de la clase como se menciona a continuación usando la sintaxis XML predefinida "className". Como puede ver, es mucho más fácil, intuitivo y menos detallado escribir el mismo código en JSX. Por lo tanto, casi toda la comunidad React usa JSX para escribir código React.

¿Qué es JSX? JSX significa JavaScript XML. XML es una sintaxis muy fácil de usar para los desarrolladores. JSX facilita escribir y agregar HTML en React.

Eche un vistazo a la diferencia entre crear elementos en React vs Javascript. Notará cómo React le brinda más flexibilidad para escribir y acceder al código, lo que facilita el desarrollo y la depuración.

Aunque JSX facilita a los desarrolladores la escritura de código, no es el mejor formato para que lo entiendan los navegadores. Por esta razón, lo compilaremos en un formato JavaScript normal que se entregará al navegador.

Reaccionar formularios de datos

Los componentes de React tienen dos formas de datos:

• Accesorios
◦ Los accesorios son propiedades recibidas de los antepasados ​​en la jerarquía de componentes. No se pueden cambiar ni mutar. Por ejemplo, para pasar una variable de un componente principal a uno secundario, puede pasarla como accesorio.
• Estado
◦ El estado es local para un componente y se puede cambiar mediante eventos. Por ejemplo, si tiene una variable de estado (estado.texto), el texto se puede cambiar de acuerdo con diferentes acciones.

NOTA: Los componentes secundarios pueden recibir tanto los valores de ese estado como eventos para actualizar ese estado a través de accesorios.

Cómo integrar React con Drupal

Primero comenzaremos creando un módulo personalizado y luego el archivo JSX.
Ahora vamos a crear el módulo personalizado de Drupal como se muestra a continuación:
Crear módulos/reaccionar/reaccionar.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

A continuación, creemos el archivo React como se muestra a continuación. Estamos creando un marcado HTML con una etiqueta H1 que se imprimirá en la identificación de la aplicación de reacción .

Crear módulos/reaccionar/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 );

Accediendo al archivo JSX por Drupal

Ahora, para que Drupal pueda acceder y usar el archivo JSX que acabamos de crear, deberá configurar una cadena de herramientas de JavaScript con Webpack.

En un nivel alto, estamos configurando un proceso que tomará nuestros archivos JavaScript de origen, como index.jsx , y los pasará a través de diferentes pasos de compilación que, en última instancia, generarán un único archivo .js optimizado. Este paso de compilación nos permite aprovechar todo el ecosistema de React/JavaScript mientras trabajamos en nuestro módulo o tema de Drupal.

Los pasos básicos son:

• Configure una cadena de herramientas que procesará sus activos de JavaScript en uno o más archivos de JavaScript "agrupados" con una ubicación conocida que no cambia
• Cree una biblioteca de activos de Drupal que apunte a los activos agrupados de su cadena de herramientas de construcción

Paso 1: Instale React, Webpack y Babel

Antes de instalarlos, deberá asegurarse de tener node y nmp listos en su entorno de desarrollo. React es la biblioteca de Javascript. Babel y webpack son compiladores que necesita para convertir .jsx a javascript para el navegador. Babel es uno de los mejores compiladores de la comunidad para compilar archivos .jsx. Para instalar React, Webpack y Babel, ejecute los siguientes comandos desde el directorio raíz de sus módulos temáticos/react/ , en su 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

Paso 2: configurar Webpack con un archivo webpack.config.js

Cree un archivo webpack.config.js en la raíz de su módulo: módulos/reaccionar/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;

Paso 3: Configure Babel con un archivo .babelrc

Proporcione alguna configuración para Babel creando un archivo .babelrc con los siguientes ajustes preestablecidos fácilmente disponibles (que se usarán al compilar el código de React) en el directorio raíz del módulo: módulos/react/.babelrc

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

Paso 4: agregue algunos scripts auxiliares a package.json

Esto es necesario para ejecutar su paquete nmp, ya que siempre se refiere al archivo base package.json antes de cualquier acción.

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

Paso 5: Ejecute la compilación para compilar los archivos jsx en el único archivo js

Ahora estamos listos para compilar el archivo JSX.

npm ejecutar compilación (O) npm ejecutar compilación: desarrollo

Básicamente, esto compila el archivo según la configuración en el archivo webpack.config y ahora crea el archivo js compilado en el repositorio mencionado js/src/dist .

Paso 6: Definir una biblioteca de recursos de Drupal

Ahora puede agregar el archivo JavaScript compilado como un recurso de Drupal en la biblioteca ( 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}

Ahora está todo listo y listo para crear algunos componentes React geniales en su sitio web de Drupal.

Así es como se veía mi resultado final (abajo). Puedes ver el bloque React que creé con una etiqueta H1 "Hello Specbee".

Pensamientos finales

¿No fue fácil? Al crear componentes React en Drupal, asegúrese de tener el elemento React dom creado en Drupal (' react-app ') y adjunte siempre el archivo Javascript (que compilamos a partir del archivo React JSX) a la biblioteca Drupal. ¿Te gustó lo que acabas de leer? Nos esforzamos por publicar contenido valioso para usted cada semana. Suscríbase a nuestro boletín semanal para mantenerse actualizado con todas nuestras últimas ideas.