Créer et ajouter un composant ReactJS à la boîte à outils

Introduction

Dans le développement moderne avec ReactJS, la création de components réutilisables et leur intégration dans un environnement de conception est une étape essentielle pour améliorer la productivité et la cohérence du code. Ce guide explique comment créer une component ReactJS personnalisée et la rendre disponible dans le toolbox. Vous découvrirez comment structurer le module, gérer les propriétés, et configurer la component pour qu’elle soit facilement accessible et configurable via l’interface utilisateur de la plateforme.

Étapes à suivre

Partie 1 – Créer le Module React

1. Créer un module pour la component

2. Écrire le code de la component ReactJS

import React from "react";
import Box from "@esm/components/web/Box";

const CurrencyFormat = ({ amount, ...props }) => {

  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });

  return <Box {...props}> {formatter.format(amount)} </Box>;
};

export default CurrencyFormat;

Pour rendre votre component compatible avec le système de styles en place, il est essentiel d’utiliser un « Box » comment élément racine (plutôt qu’un « div »). Il est aussi essentiel de recevoir les props (…props) et de les passer à Box, car la plateforme utilise les props pour propager beaucoup d’information au travers les components.

Partie 2 – Faire apparaitre la component dans le toobox

1. Créer une nouvelle entité nommée CurrencyFormat. Cette étape demande une solution temporaire; un support direct dans l’IDE sera probablement ajouté à l’avenir.

1. Créer un Aggregate temporaire nommé « Temp »

2. Clique droit -> Add Entity. Nommez l’entity CurrencyFormat’

3. Cliquer sur l’entity et dans le Properties Panel, changer son bas type pour « Component »

4. La component va se déplacer dans « unreferenced components »

5. Supprimer l’aggregate « Temp »

2. Créer les champs pour les props React

Sur l’entity CurrencyFormat, créez un champ pour chaque prop React. Dans cet exemple, on a un seul prop, qui est « amount ».

3. Créer une « update command»

4. Ajouté un attribut moduleId sur l’entity avec le nom complet du module

(sans le .jsx) ‘@votre/projet/CurrencyFormat’

Votre component est maintenant visible dans le toolbox :

Partie 3 – Utiliser votre component

1. Allez sur une page et glissez-y le component

2. Activer le panel des caractéristiques. Remarquez comment les props sont devenues configurables, comme pour n’importe quel autre component livré avec la plateforme.

Conclusion

Créer une component ReactJS et la placer dans le toolbox implique de structurer correctement le module, de configurer les props pour la compatibilité avec la plateforme, et de relier le module au système. Une fois intégrée, la component devient facilement configurable et utilisable dans l’environnement de développement.