Cómo usar React con Drupal

React es un framework Javascript muy popular creado por Facebook. Permite la construcción de interfaces rápidas, bellas e interactivas, de las que enamoran a los usuarios. Drupal, por otro lado, es un CMS fantástico que permite crear sitios Web pequeños, medianos y grandes.

A veces se quiere utilizar ambos a la vez: ofrecer el sofisticado backend de Drupal y un rápido frontend basado en React.

En este artículo, repasamos varios métodos para combinar ambas tecnologías.

Headless Drupal o embedded React

La principal decisión que se debe tomar cuando se utiliza React con Drupal es si se quiere utilizar "headless Drupal" donde Drupal es solo el backend y React es la única interfaz que el usuario ve o si queremos solamente añadir React a un sitio web Drupal utilizando el sistema de plantillas de Drupal. Profundicemos:

Headless Drupal con un frontend en React

En un escenario como este, Drupal se utiliza como backend de una aplicación construida con React. Ambos sistemas están completamente separados y se comunican utilizando HTTP, con REST y GraphQL, por ejemplo.

Esta opción es la mejor si se quiere:

• Crear una Progressive Web App (PWA) para usuarios en dispositivos móviles.
• Crear una single page app que guarda información en Drupal.
• Crear un acceso sencillo a una parte de un sitio grande construido con Drupal. Por ejemplo, si unos agentes suben imagenes posicionadas geologicamente. Solo necesitarán una interfaz sencilla a la que acceder desde sus dispositivos, sin la complejidad del backend completo de Drupal, que otros editores usan.
• Crear un sitio pequeño que solo muestra datos de un sitio mayor. Por ejemplo, un sitio con noticias de una sección de un gran sitio de noticias.

Cómo crear una app Drupal Headless

Si se opta por headless Drupal, se construye la aplicación React separada y se comunica con el backend utilizando peticiones HTTP, como se haría con cualquier otro tipo de backend. A React no le importa, solo necesita utilizar la API que el backend expone.

Facebook liberó un boilerplate estupendo para ayudar a empezar con el desarrollo de este tipo de aplicaciones React en su página.

Cuando la aplicación en React se esta ejecutando, se crean los endpoints en Drupal, que funciona como el origen de datos. Drupal 8 es una fantástica pieza de software en este aspecto pues inclue una completa API REST. Es posible encontrar documentación al respecto en la página de la Drupal REST API. Es también especialmente importante el módulo REST UI que permite crear endpoints configurables para la entidades.

Si se prefiere, se puede utilizar GraphQL, hay un completo módulo del mismo nombre que permite la creación de endpoints GraphQL.

Si el objetivo es crear una aplicación headless con Drupal, vale la pena revisar un proyecto de ejemplo: ContentaCMS. Éste es una implementación completa de Drupal con otros populares frameworlks. La implementación con React puede encontrarse aquí.

React incrustado en Drupal

Frecuentemente no es necesario una implementación completamente headless, pero queremos uno o dos elementos altamente interactivos en algunas páginas de nuestro sitio Web. Puede ser un formulario complicado con varios pasos que funciona mejor sin recargar la página o un elemento de la interfaz altamente interactivo que es mejor desarrollar con JavaScript.

En este caso, es mucho más sensato usar React para crear un componente y incrustarlo en la página que Drupal genera. De esta forma es posible utilizar toda la funcionalidad de Drupal para el resto del sitio: registro, pintado de campos, vistas, etc.

Cómo incrustar React en un Drupal

Para los que están empezando, es necesario añadir la libreria React al sitio Web, de la misma forma que se añadiria cualquier otra libreria JavaScript. Dependiendo de si el script es necesario en cada página o es parte del tema o de un módulo, hay diferentes formas de hacerlo. No entraremos en detalles pues hay mucha documentación al respecto:

1. https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module
2. https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Un método rápido que, aunque no es el recomendado, sirve perfectamente para probar, es simplemente añadir las etiquetas necesarias en la plantilla html.html.twig:

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

y nuestro script con la aplicación React.

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

Uno de los inconvenientes de esta opción es que solo se puede utilizar JavaScript. No es posible usar ni JSX ni TypeScript, que si se usarían en el caso anterior. El motivo es que, una aplicación React completa utiliza Webpack o Babel para transiplar los archivos JSX o Typescript a JavaScript. En nuestro ejemplo, por mantener la simplicidad, no usamos estas herramientas.

Consejo: Para poder usar JSX es necesario usar primero Webpack para compilar los archivos JavaScript antes de añadirlos a Drupal. Una buena forma de hacerlo es usar el repositorio create-repo-app para empezar y copiar los archivos resultantes creados después de la transpilación. De esta forma no deberemos tampoco incluir la librería de React ya que se empaqueta con el resto del código. Trabajar así es algo más complicado, por eso evitamos hacerlo en este artículo.

Volviendo a nuestro ejemplo, lo primero que debemos crear es una etiqueta HTML en la que la aplicación se pintará. Puede ser un div en un bloque, por ejemplo

<div id="myreactapp" />

En myreactapp.js crearemos nuestra app.

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

Con esto tenemos una aplicación React incrustada dentro de nuestra página con Drupal. Puedes obtener la información de una API REST como en el modelo headless, o puedes utilizar la variable drupalSettings global para cargar los datos.

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');
);

Es importante recordar que si queremos enviar datos a nuestro Drupal, deberemos hacerlo igualmente usando un endpoint.

Y aquí acaba nuestra guía para principiantes. Ahora sólo falta ponerse manos a la obras y combinar estos potente framework con Drupal.