Article original : How to Use React 19 in Power Apps PCF Components
Le Power Apps Component Framework PCF en abrégé vous permet de créer des composants personnalisés complexes en utilisant des outils traditionnels de développement web comme HTML, CSS et JavaScript.
Lors de la création d'un nouveau projet PCF, vous pouvez choisir entre deux types de contrôles : les contrôles standard et les contrôles virtuels React. Pour les composants non triviaux, React est souvent un bon choix car il abstrait une grande partie de la manipulation lourde du DOM. Cependant, lorsque vous utilisez React avec PCF, vous êtes actuellement limité à React 16 dans les applications Canvas et React 17 dans les applications Model-Driven.
Cela ne signifie pas que vous ne pouvez pas utiliser une version plus récente mais cela signifie renoncer au support de la virtualisation. Pour de nombreux composants PCF, ce compromis est généralement acceptable.
Dans cet article, je vais vous montrer comment intégrer la dernière version de React (v19) avec votre composant PCF. Nous installerons les dépendances nécessaires et configurerons le composant pour tirer pleinement parti de la dernière version de React.
Cet article suppose que vous :
Comprenez comment utiliser le PAC CLI pour créer des projets PCF.
Êtes à l'aise avec l'utilisation de la ligne de commande et d'un éditeur de code (par exemple, VS Code)
Connaissez les bases de React
Avez une certaine expérience avec le développement PCF
Note : Vous n'avez pas besoin d'accès à un environnement Power Platform sauf si vous souhaitez déployer le composant. Le harnais de test intégré sera suffisant pour suivre cet article.
Dans ce tutoriel, vous allez :
Créer un projet PCF
Pour créer un projet PCF, vous utiliserez le PAC CLI. Si vous ne l'avez pas encore installé, suivez les instructions ici.
À partir du répertoire de votre choix, créez un nouveau dossier pour ce projet, puis ouvrez votre terminal et exécutez :
pac pcf init -ns SampleNameSpace -n SampleComponent --template field
Une fois terminé, exécutez :
npm install
Cela installe les dépendances du projet par défaut.
Alors, pourquoi n'avons-nous pas utilisé le drapeau --framework pour spécifier React lors de la création du projet ? Parce que ce drapeau configure un contrôle virtuel React, qui ne supporte que React 16/17. Au lieu de cela, nous créons un contrôle standard et installons React nous-mêmes.
Installer les dépendances React
Pour utiliser React 19, vous aurez besoin de quatre dépendances :
reactreact-dom@types/react@types/react-dom
Ces deux dernières fournissent les typages TypeScript pour React. Installez les dépendances ci-dessus avec :
npm install -D react react-dom @types/react @types/react-dom
Vous pouvez vérifier l'installation en regardant le fichier package.json dans le projet.
Bien que ce ne soit pas nécessaire pour ce que nous allons faire, afin d'utiliser certaines des nouvelles fonctionnalités de React, vous devrez peut-être ajuster les compilerOptions dans le fichier tsconfig.json pour inclure la ligne suivante :
"jsx": "react-jsx"
Voici à quoi devrait ressembler le fichier tsconfig.json avec la ligne jsx ajoutée :
Créer un bouton non-React
Vérifions que tout fonctionne avant d'introduire React.
À partir de la ligne de commande, exécutez :
npm run start:watch
Cela peut prendre un moment. Cela ouvrira un navigateur montrant votre harnais de test PCF. Vous verrez probablement un écran vide. C'est normal nous n'avons encore rien rendu.
Ouvrez index.ts dans le dossier SampleComponent. Ce fichier contient une classe qui implémente l'interface de contrôle standard PCF. Créons un bouton basique non-React.
Mettez à jour la méthode init dans le fichier index.ts comme ceci :
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement
): void {
// Un bouton basique avec du JS vanilla et le DOM
const btn = document.createElement('button');
btn.textContent = 'Cliquez-moi !';
container.appendChild(btn);
// Un écouteur d'événement simple pour les clics sur le bouton
btn.addEventListener('click', () => {
alert('Bouton cliqué !');
});
}
Maintenant, retournez à votre harnais de test. Vous devriez voir un bouton. Cliquer dessus devrait afficher une alerte.
Créer un bouton React
Ensuite, remplaçons notre code DOM simple par React.
Supprimez le code du bouton de init(), laissant la méthode init vide.
Ensuite, créez un nouveau fichier : Button.tsx. À l'intérieur de Button.tsx, ajoutez le code ci-dessous. Ce composant acceptera une prop label et émettra un événement onClick. Assurez-vous d'exporter la fonction.
export default function Button(props: { label: string; onClick: () => void }) {
return <button onClick={props.onClick}>{props.label}</button>;
}
Ajouter le bouton React au composant PCF
Dans index.ts, mettez à jour le fichier pour :
Importer
createRootdepuisreact-dom/clientImporter le composant
ButtonRendre le composant
Button
Voici l'exemple minimal :
import { createRoot } from 'react-dom/client'; // importer la méthode createRoot
import Button from './Button'; // importer le composant button.tsx que nous venons de créer
export class SampleComponent
implements ComponentFramework.StandardControl<IInputs, IOutputs>
{
constructor() {
// Vide
}
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement
): void {
// Ajoutez le code ci-dessous pour créer une racine React qui nous permet de rendre notre composant de bouton.
const root = createRoot(container);
root.render(
Button({ label: 'Bouton React', onClick: () => alert('Bouton React cliqué !') })
);
}
// Autres méthodes ici...
}
Vous devriez maintenant voir « Bouton React » dans le navigateur. Cliquer dessus déclenchera l'alerte.
Rendre le bouton React lorsque le composant PCF est mis à jour
De nombreux composants PCF reçoivent des valeurs d'entrée dynamiques. Si les entrées changent, nous voulons que le composant React se re-render. C'est là que updateView() intervient. updateView() est déclenché lorsque le sac de propriétés PCF change.
Déplaçons la logique de rendu de init() vers updateView().
Tout d'abord, importez Root depuis react-dom/client, et initialisez root en tant que propriété de la classe.
import { createRoot, Root } from 'react-dom/client'; // ajoutez Root comme une importation
export class SampleComponent implements ComponentFramework.StandardControl<IInputs, IOutputs> {
root: Root; // initialisez la propriété root sur la classe SampleComponent
constructor() {
// Vide
}
// autres méthodes ici...
}
Ensuite, modifiez init() pour définir this.root sur la racine créée par la méthode createRoot de React. Déplacez la logique de rendu de la méthode init vers updateView(), en remplaçant root par this.root.
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement
): void {
this.root = createRoot(container); // attribuez la racine que React crée à this.root
}
public updateView(context: ComponentFramework.Context<IInputs>): void {
// rendre le composant de bouton React, en référençant this.root
this.root.render(
Button({ label: 'Bouton React', onClick: () => alert('Bouton cliqué !') })
);
}
Avec la configuration ci-dessus, React va maintenant re-rendre votre bouton lorsque le sac de propriétés d'un composant PCF change.
Conclusion
Vous avez maintenant créé un composant PCF qui utilise la dernière version de React ! En installant et en configurant React manuellement, vous évitez les limitations de version des contrôles React intégrés de Microsoft déverrouillant la puissance des fonctionnalités modernes de React.
Bien que cette configuration ne supporte pas la virtualisation, pour de nombreux composants, c'est un compromis équitable pour des outils modernes et une maintenabilité.
Si vous construisez des composants PCF au-delà de la simple manipulation du DOM, React peut être un moyen puissant d'améliorer votre flux de développement et la flexibilité de l'UI.
Avez-vous aimé cet article ? J'écris régulièrement sur le low-code, les modèles de développement et les sujets technologiques pratiques sur scriptedbytes.com