Contrôles React et bibliothèques de plateforme

Lorsque vous utilisez des bibliothèques React et de plateforme, vous utilisez la même infrastructure que la plateforme Power Apps. Cette infrastructure signifie que vous n’avez plus besoin de empaqueter les bibliothèques React et Fluent individuellement pour chaque contrôle. Tous les contrôles partagent une instance et une version communes de la bibliothèque, ce qui offre une expérience transparente et cohérente.

En réutilisant les bibliothèques existantes de la plateforme React et Fluent, vous pouvez vous attendre aux avantages suivants :

  • Taille réduite du bundle de contrôle
  • Emballage de solution optimisée
  • Transfert en cours d’exécution, scripts et rendu de contrôle plus rapides
  • Conception et alignement du thème avec le système de conception Fluent de Power Apps

Avec ces avantages, cette approche devrait devenir la meilleure façon de créer tous les composants de code Power Apps une fois que cette fonctionnalité sera disponible de manière générale.

Prérequis

Comme pour n’importe quel composant, installez Visual Studio Code et l’interface CLI Microsoft Power Platform, comme décrit dans Conditions préalables.

Note

Si vous avez déjà installé Power Platform CLI pour Windows, vérifiez que vous exécutez la dernière version à l'aide de la pac install latest commande. Power Platform Tools pour Visual Studio Code doivent se mettre à jour automatiquement.

Créer un composant React

Note

Ces instructions supposent que vous ayez déjà créé des composants de code. Si ce n’est pas le cas, consultez ce tutoriel : Créez votre premier composant.

Il existe un nouveau paramètre --framework (-fw) pour la commande pac pcf init. Définissez la valeur de ce paramètre sur react.

Le tableau suivant montre la forme longue des commandes :

Paramètre Valeur
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (par défaut)

La commande PowerShell suivante utilise les raccourcis de paramètre et crée un projet de composant React et exécute npm-install dans le dossier dans lequel vous exécutez la commande :

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

Vous pouvez maintenant générer et afficher le contrôle dans le banc d’essai comme d’habitude à l’aide de npm start.

Après avoir créé le contrôle, vous pouvez l’inclure dans des solutions et l’utiliser pour des applications pilotées par modèle (y compris des pages personnalisées) et des applications canvas comme des composants de code standard.

Différences par rapport aux composants standard

Cette section décrit les différences entre un composant React et un composant standard.

ControlManifest.Input.xml

Définissez l’attribut de l’élément de contrôlecontrol-type sur virtual à la place de standard.

Note

La modification de cette valeur ne convertit pas un composant d’un type en un autre.

Au sein de l’élément de ressources, trouvez deux nouveaux éléments enfants élément platform-library comme dans l’exemple suivant :

<resources>
  <code path="index.ts" order="1" />
  <platform-library name="React" version="16.14.0" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Note

Pour plus d’informations sur les versions valides des bibliothèques de plateforme, consultez Liste des bibliothèques de plateforme prises en charge.

Utilisez des bibliothèques de plateforme pour Fluent 8 et 9. Si vous n’utilisez pas Fluent, supprimez l’élément platform-library dont la valeur de l’attribut name est Fluent.

Index.ts

La méthode ReactControl.init pour l’initialisation du contrôle n’a pas de div paramètres, car les contrôles React ne restituent pas directement le DOM. Au lieu de cela, ReactControl.updateView retourne un ReactElement qui contient les détails du contrôle réel au format React.

bundle.js

Le package n’inclut pas les bibliothèques React et Fluent, car elles sont partagées. Ce partage réduit la taille de bundle.js.

Contrôles d’échantillon

Les contrôles suivants sont inclus dans les exemples. Ils fonctionnent de la même manière que leurs versions standard mais offrent de meilleures performances puisqu’il s’agit de contrôles virtuels.

Exemple Description Lien
ChoicesPickerReact Le standard ChoicesPickerControl est converti en contrôle React. Exemple de ChoicesPickerReact
FacepileReact Le contrôle ReactStandardControl a été converti en contrôle React. FacepileReact

Liste des bibliothèques de plates-formes prises en charge

Les bibliothèques de plateforme sont disponibles à la fois au niveau de la génération et du runtime pour les contrôles qui utilisent la fonctionnalité de bibliothèques de plateforme. Actuellement, la plateforme fournit les versions suivantes, qui sont les versions prises en charge les plus récentes.

Nom Nom du package npm Plage de versions autorisée Version chargée
React réagir 16.14.0 17.0.2 (Modèle), 16.14.0 (Canvas)
Fluent @fluentui/react 8.29.0 8.29.0
Fluent @fluentui/react 8.121.1 8.121.1
Fluent @fluentui/react-components >=9.4.0 <=9.46.2 9.68.0

Note

L’application peut charger une version compatible supérieure d’une bibliothèque de la plateforme au moment de l’exécution, mais il se peut que la version ne soit pas la dernière version disponible. Vous pouvez spécifier Fluent 8 ou Fluent 9 dans le manifeste, mais pas les deux.

FAQ

Q : Puis-je convertir un contrôle standard existant en contrôle React à l’aide de bibliothèques de plateforme ?

A: Non. Vous devez créer un nouveau contrôle à l’aide du nouveau modèle, puis mettre à jour le manifeste et les méthodes d’index.ts. Pour référence, comparez les exemples standard et React décrits dans la section précédente.

Q : Puis-je utiliser des contrôles React et des bibliothèques de plateforme avec Power Pages ?

A: Non. Les contrôles React et les bibliothèques de plateforme fonctionnent actuellement uniquement avec des applications canvas et basées sur des modèles. Dans Power Pages, les contrôles React ne sont pas mis à jour en fonction des modifications apportées aux autres champs.

En quoi consistent les composants de code ?
Composants de code pour les applications de canevas
Créer et générer un composant de code
En savoir plus sur Power Apps component framework
Utiliser des composants de code dans Power Pages

  • Dernière mise à jour :