Controles de React y bibliotecas de plataforma

Cuando se usan bibliotecas de React y plataforma, se usa la misma infraestructura que la plataforma de Power Apps. Esta infraestructura significa que ya no es necesario empaquetar bibliotecas de React y Fluent individualmente para cada control. Todos los controles comparten una versión y una instancia de biblioteca comunes, lo que proporciona una experiencia fluida y coherente.

Al reutilizar las bibliotecas React y Fluent de la plataforma existente, puede esperar los siguientes beneficios:

  • Tamaño reducido del paquete de controles
  • Empaquetado de soluciones optimizadas
  • Transferencia, secuencias de comandos y representación de controles más rápidas
  • Alineación del diseño y del tema con el sistema de diseño Fluent de Power Apps

Con estas ventajas, se espera que este enfoque se convierta en la manera preferida de crear todos los componentes de código Power Apps después de que esta característica alcance la disponibilidad general.

Requisitos previos

Al igual que con cualquier componente, instale Visual Studio Code y la CLI de Microsoft Power Platform como se describe en Requisitos previos.

Nota

Si ya instaló la CLI de Power Platform para Windows, asegúrese de que ejecuta la versión más reciente mediante el pac install latest comando . Power Platform Tools para Visual Studio Code se deberían actualizar automáticamente.

Crear un componente React

Nota

Estas instrucciones suponen que ya ha creado componentes de código antes. Si no lo ha hecho, consulte este tutorial: Cree su primer componente.

Hay un nuevo parámetro --framework (-fw) para el comando pac pcf init. Establecer el valor de este parámetro en react.

La siguiente tabla muestra la forma larga de los comandos:

Parámetro valor
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (predeterminado)

El siguiente comando de PowerShell usa las formas abreviadas de los parámetros, crea un proyecto de componente de React y ejecuta npm-install en la carpeta donde se ejecuta el comando:

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

Ahora puede compilar y ver el control en el entorno de pruebas como de costumbre mediante npm start.

Después de compilar el control, puede empaquetarlo dentro de soluciones y usarlo para aplicaciones basadas en modelos (incluidas páginas personalizadas) y aplicaciones de lienzo como componentes de código estándar.

Diferencias con los componentes estándar

En esta sección se describen las diferencias entre un componente React y un componente estándar.

ControlManifest.Input.xml

Establezca el atributo del elemento de controlcontrol-type en virtual en lugar de standard.

Nota

Cambiar este valor no convierte un componente de un tipo a otro.

Dentro de resources element, encontrará dos nuevos elementos secundarios platform-library element como en el siguiente ejemplo:

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

Nota

Para obtener más información sobre las versiones válidas de la biblioteca de la plataforma, consulte Lista de bibliotecas de plataformas compatibles.

Use bibliotecas de plataforma para Fluent 8 y 9. Si no usa Fluent, quite el platform-library elemento donde el valor del name atributo es Fluent.

Index.ts

El método ReactControl.init para la inicialización del control no tiene parámetros div porque estos controles React no representan el DOM directamente. En su lugar, ReactControl.updateView devuelve un ReactElement que tiene los detalles del control real en formato React.

bundle.js

El paquete no incluye bibliotecas de React y Fluent porque se comparten. Este uso compartido hace que el tamaño de bundle.js sea más pequeño.

Controles de ejemplo

Los siguientes controles se incluyen en los ejemplos. Funcionan igual que sus versiones estándar pero ofrecen un mejor rendimiento ya que son controles virtuales.

Ejemplo Descripción Enlace
ChoicesPickerReact El control estándar ChoicesPickerControl se convirtió en un control de React. Ejemplo de ChoicesPickerReact
FacepileReact El ReactStandardControl se convirtió en un control React. FacepileReact

Lista de bibliotecas de plataformas admitidas

Las bibliotecas de plataforma están disponibles tanto en la compilación como en el entorno de ejecución para los controles que usan la funcionalidad de bibliotecas de plataforma. Actualmente, la plataforma proporciona las siguientes versiones, que son las versiones más altas admitidas.

Nombre Nombre del paquete de npm Rango de versiones permitidas Versión cargada
React react 16.14.0 17.0.2 (Modelo), 16.14.0 (Canvas)
Fluido @fluentui/react 8.29.0 8.29.0
Fluido @fluentui/react 8.121.1 8.121.1
Fluido @fluentui/react-components >=9.4.0 <=9.46.2 9.68.0

Nota

Es posible que la aplicación cargue una versión compatible superior de una biblioteca de plataforma en tiempo de ejecución, pero es posible que la versión no sea la última versión disponible. Puede especificar Fluent 8 o Fluent 9 en el manifiesto, pero no ambos.

Preguntas frecuentes

P: ¿Puedo convertir un control estándar existente a un control React mediante bibliotecas de plataforma?

A: No. Debe crear un nuevo control mediante la nueva plantilla y, a continuación, actualizar el manifiesto y los métodos de index.ts. Como referencia, compare los ejemplos estándar y React descritos en la sección anterior.

P: ¿Puedo usar controles de React y bibliotecas de plataforma con Power Pages?

A: No. Actualmente, los controles de React y las bibliotecas de plataforma solo funcionan con aplicaciones de lienzo y basadas en modelos. En Power Pages, los controles de React no se actualizan según los cambios en otros campos.

Qué son los componentes de código
Componentes de código para aplicaciones de lienzo
Crear y compilar un componente de código
Aprende Power Apps component framework
Usar componentes de código en Power Pages

  • Se actualizó por última vez el