¿Es posible crear un widget de aplicación de reacción incrustado?

2 minutos de lectura

Quiero crear un widget que se pueda incrustar en diferentes sitios de WordPress. Como ejemplo, construir una calculadora de hipotecas y agregar funciones, como crear un PDF descargable con la información ingresada.

¿Es posible hacer esto con reaccionar? Más específicamente usando la herramienta create-react-app.

¡Gracias de antemano!

  • Sí, no debería ser difícil. Puede comenzar a crear un código abreviado simple que imprima un HTML simple, ponga en cola los archivos de React y ejecute su JS personalizado para generar el resultado.

    – brasofilo

    11 de octubre de 2018 a las 3:11

avatar de usuario
Kiruahxh

Es posible crear widgets incrustables de reacción, pero create-react-app no es la herramienta adecuada para hacerlo.

La forma más fácil de compartir un paquete js compilado y usarlo en un navegador es empaquetarlo en formato UMD. Sin embargo, create-react-app no lo soporta. Técnicamente, puede importar un paquete desde create-react-app como un widget, pero es una molestia. Algunas personas hacen esto por analizar el manifiesto de la aplicacióny otro por copiando el contenido html del índice en la página de destino. La mayoría de las veces, un widget toma datos de entrada y tendrá dificultades con estas técnicas.

Le sugiero que use otro sistema de compilación que admita UMD listo para usar, como paquete/babel (el más fácil), webpack/babel, nwb, etc. Aquí están las recomendaciones oficiales de reacción sobre compilar cadenas.

Aquí hay un ejemplo index.js archivo que podría usar para declarar un widget:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

window.MyWidget = function(idElement, param1, param2) {
    let config = {param1, param2};
    ReactDOM.render(<App config={config} />, document.getElementById(idElement));
    return this;
}

A continuación, se puede crear una instancia del widget en la página de destino:

<body>
  <div id="react-widget">

  <script src="http://cdm.com/my-react-widget-bundle.js"></script>
  <!-- if bundled separately, load the css -->
  <script>
    window.addEventListener("DOMContentLoaded", function(event) {
      new MyWidget("#react-widget", "toto", "tata");
    });
  </script>
  </div>
</body>

El segundo argumento de ReactDOM.render es el objetivo de renderizado. Puede estar en cualquier parte de la página.

ReactDOM.render(element, document.getElementById('widgetTarget'));

  • Bien, ¿puedo crear el archivo JS y subirlo a un CDN y luego inyectarlo en el parámetro del elemento? ¿O posiblemente usar un iFrame para renderizar el módulo React? ¿Cuál sería mejor?

    –Michael Carniato

    11 de octubre de 2018 a las 6:03

  • Agregue el elemento contenedor con una identificación u otro selector de consulta único a la página donde desea que se ejecute el widget de reacción. Agregue el widget de soporte js. Cuando se invoca ReactDOM.render, renderizará su aplicación de reacción (argumento 1) dentro del elemento de destino (argumento 2)

    – dhudson

    12 oct 2018 a las 17:08

  • ¡Fantástico! Gracias por tu ayuda 🙂

    –Michael Carniato

    14/10/2018 a las 21:44

¿Ha sido útil esta solución?