Intégration sous REACT

Introduction

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

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;
  1. Votre composant est maintenant créé, il faut alors le déclarer dans le containerBuilder.
containerBuilder.registerAsync(() => System.import('./components/Cirkwi')).as('RCirkwi');
  1. 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é.