Partager via


Contrôles React et bibliothèques de plateforme (version préliminaire)

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l'objet de modifications.]

Vous pouvez obtenir des gains de performances significatifs en utilisant React et les bibliothèques de plateforme. Lorsque vous utilisez React et les bibliothèques de plateforme, vous utilisez la même infrastructure que celle utilisée par la plateforme Power Apps. Cela signifie que vous n’avez plus besoin de regrouper les bibliothèques React et Fluent individuellement pour chaque contrôle. Tous les contrôles partagent une instance et une version de bibliothèque communes pour fournir 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 faisceau de contrôle
  • Package de solution optimisé
  • Transfert d’exécution, scripts et rendu de contrôle plus rapides

Avec les avantages offerts par la réutilisation de ces ressources de composants, nous espérons que cette approche deviendra la manière préférée de créer tous les composants de code Power Apps une fois que cette fonctionnalité aura atteint la disponibilité générale.

Conditions préalables

Comme pour tout composant, vous devez installer Visual Studio Code et Microsoft Power Platform CLI comme décrit ici : Conditions préalables

Notes

Si vous avez déjà installé la CLI Power Platform autonome, veillez à exécuter la dernière version à l’aide de la commande pac install latest. Power Platform Tools pour Visual Studio Code doit se mettre à jour automatiquement.

Création d’un composant React

Notes

Ces instructions supposent que vous ayez déjà créé des composants de code. Si ce n’est pas le cas, consultez ce didacticiel : Créer 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ètres et crée un projet de composant React et exécute npm-install dans le dossier où vous exécutez la commande :

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

Vous pouvez maintenant créer et afficher le contrôle dans le faisceau de test comme d’habitude en utilisant npm start.

Après avoir créé le contrôle, vous pouvez le mettre en package dans des solutions et l’utiliser pour des applications pilotées par modèle (y compris des pages personnalisées) et des applications canevas 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

L’attribut élément de contrôlecontrol-type est défini sur virtual plutôt que sur standard.

Notes

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

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

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

Notes

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

Nous vous recommandons d’utiliser les bibliothèques de la plateforme pour Fluent 8 et 9. Si vous n’utilisez pas Fluent, vous devez supprimer l’élément platform-library où 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 paramètres div, car les contrôles React ne restituent pas directement le DOM. Au lieu de ça, ReactControl.updateView renvoie un ReactElement qui contient les détails du contrôle réel au format React.

bundle.js

Les bibliothèques React et Fluent ne sont pas incluses dans le package, car elles sont partagées, par conséquent la taille de bundle.js est plus petite.

Exemples de contrôles

Vous pouvez trouver deux nouveaux contrôles ajoutés aux exemples dans le cadre de cet aperçu. Fonctionnellement, ils sont les mêmes que leur version standard, mais ont de meilleures performances.

Échantillon Description Lier
ChoicesPickerReact Le standard ChoicesPickerControl est converti en contrôle React. Exemple ChoicesPickerReact
FacepileReact Le contrôle ReactStandardControl est converti en contrôle React. FacepileReact

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

Les bibliothèques de plateforme sont mises à disposition à la fois lors de la génération et de l’exécution pour les contrôles qui utilisent la fonctionnalité de bibliothèques de plateforme. Actuellement, les versions suivantes sont fournies par la plateforme et sont les versions les plus élevées actuellement prises en charge.

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

Notes

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. Fluent 8 et Fluent 9 sont chacun pris en charge mais ne peuvent pas être spécifiés tous les deux dans le même manifeste.

FAQ

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

R : Non. Vous devez créer un contrôle à l’aide du nouveau modèle, puis mettre à jour les méthodes manifest et index.ts. Pour référence, comparer les exemples standard et React décrits ci-dessus.

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

R : Non. Les contrôles React et les bibliothèques de plateforme ne sont actuellement pris en charge que pour les applications canevas et pilotées par modèle. 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 canevas
Créer un composant de code
Découvrir Power Apps Component Framework
Utiliser des composants de code dans Power Pages

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).