Para transformar nuestro componente React en un plugin jQuery, necesitamos hacer dos cosas. Primero, obviamente necesitamos crear nuestro plugin. Segundo, necesitamos compilar nuestro código para que funcione bien en los dispositivos cotidianos.
Tomémoslo despacio y empecemos con el plugin.

Con src/main.jsx, golpeamos dos pájaros de un tiro ya que se comporta como el punto de entrada del componente y al mismo tiempo exporta todos los datos necesarios más allá. Ahora, cuando alguien desea utilizar este componente de React, sólo necesita requerirlo directamente.
Entonces, cargamos React y nuestro componente. Ahora es el momento de crear una función de representación:
12345678910// src/main.jsxconstReact=require($0027react$0027),Counter=require($0027./Counter$0027);functionRenderCounter(selector){React.render(<Counter/ >,document.querySelectorAll(selector)[0]);}
javascript
Este fragmento de código nos permite no sólo exportar la función, sino también asignarla como global, de la siguiente manera:
12module.exports=RenderCounter;window.RenderCounter=RenderCounter;
javascript
Por lo tanto, si otro desarrollador que no utiliza React pero tiene un cargador de dependencia quiere utilizar este componente, puede requerirlo y luego utilizar la función para renderizarlo dentro de cualquier elemento de su elección.
Además, si no tienen un cargador de dependencia, pueden utilizar la función global.
El proyecto de la placa de calderas de jQuery en realidad proporcionó la base para este plugin de jQuery.
A continuación se muestra cómo se vería nuestro main.jsx:
12345678910111213141516171819202122232425262728293031323334353637/// src/main.jsxif(typeof jQuery ! ==$0027undefined$0027){(function($){var pluginName ="clickCount", defaults ={ value:0};functionPlugin(element, options){this.element= element;this.settings= $.extend({}, defaults, options);this._defaults= defaults;this. _nombre= pluginName;this.init();} $.extend(Plugin.prototype,{init:function(){this.component=React.render(<Valor del contador={este.settings.value}/>,this. element);returnthis;},val:function(val){if(!arguments.length){returnthis.component.state.counter;}else{this.settings.value= val;this.init();}});})(jQuery);}
javascript
Sólo producimos un plugin si jQuery es accesible. La definición del plugin se envuelve en un cierre para que las variables del pluginName y las predeterminadas sean compartidas.
A continuación, se define una función constructora llamada Plugin para mantener las propiedades básicas del objeto recientemente construido y llamar al init.
Podemos hacer que nuestro componente de Reacción esté dentro de la imagen. Sin embargo, como este.elemento ya se refiere al elemento DOM de destino, no necesitamos usar document.querySelectorAll.
La función val se utiliza para acceder al estado interno del componente. Si se pasa un parámetro, cambiamos el valor y realizamos una representación del componente. React puede manejar esto actualizando el componente con las nuevas propiedades.
Sin embargo, si no se pasa ningún parámetro a val, simplemente devolverá el estado actual del componente.
Fíjate en cómo accedimos al estado interno del componente usando este contador de estado del componente. Sólo tenemos que ser conscientes de dónde se almacenan los estados de los componentes. No hay ningún conjuro de Reactancia real ahí.
Las siguientes líneas de código son necesarias ahora para añadir el plugin a jQuery:
12345678910// src/main.jsx $.fn[pluginName]=function(options){ returnthis.map(function(){if(!$.data(this,$0027plugin_$0027+pluginName)){ $. data(this,$0027plugin_$0027+pluginName,newPlugin(this, options));}return $.data(this,$0027plugin_$0027+pluginName);});};};})(jQuery);
javascript
Ahora podemos llamar a $(…).clickCount(). Considerando que cada instancia del plugin se almacena en la colección de datos $.data de cada elemento, podemos garantizar que cada instancia se maneja como un singleton por elemento. De esta manera, cada vez que clickCount es llamado a un elemento, el mismo objeto es devuelto. Esto podría ser conveniente si queremos manipular los valores internos de los componentes.