Intégration sous REACT

Ce tutoriel technique vous permettra d’intégrer votre module dans un environnement « React Habitat » (https://github.com/DeloitteDigitalAPAC/react-habitat).

Cas A – Version PHP (recommandé) :

    1. Récupérez le code d’insertion PHP depuis votre interface de gestion de modules, il devrait ressembler à ça :

      <?php $code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]); echo $code_html; ?>

Rien de plus à faire.

Cas B – Version JavaScript (composant React):

    1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de modules.
    2. Commençons par créer le composant React qui va être inséré dans la page :
      Cirkwi.jsx (où XXX est l’identifiant du module)

      import React from 'react';
      
      class Cirkwi extends React.Component {
          render() {
              mbLoadModule({ id: XXX, locale: "fr" });
              return (
                  <div>
                      <div id="mb-module-XXX"></div>
                  </div>
              );
          }
      }
      
      export default Cirkwi;
      
    3. Votre composant est maintenant créé, il faut alors le déclarer dans le containerBuilder
      containerBuilder.registerAsync(() => System.import('./components/Cirkwi')).as('RCirkwi');
    4. Dans votre code PHP, juste avant de charger votre composant, insérez la balise Javascript contenant le script nécessaire au bon fonctionnement du module

      [...]
      <script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
      [...]
      <div data-component="RCirkwi"></div>
      [...]
      

N’oubliez pas de « build » votre projet ! Une fois ceci fait, le composant est correctement installé.

Leave a Comment