Compartir a través de

Controles React y bibliotecas de plataforma

  • Artículo

Cuando usa React y las bibliotecas de la plataforma, está usando la misma infraestructura que usa la plataforma Power Apps. Esto significa que ya no tiene que empaquetar las bibliotecas React y Fluent individualmente para cada control. Todos los controles comparten una instancia y versión de biblioteca común para brindar una experiencia uniforme y uniforme.

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

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

Con los beneficios disponibles al reutilizar estos recursos de componentes, esperamos que este enfoque se convierta en la forma preferida de todos los componentes de código Power Apps se crearán después de que esta característica alcance la disponibilidad general.

Nota

Con la versión de disponibilidad general, todos los controles virtuales existentes seguirán funcionando. Sin embargo, deben reconstruirse e implementarse utilizando la última versión de la CLI (>= 1.37) para facilitar las futuras actualizaciones de la versión de React de la plataforma.

Requisitos previos

Al igual que con cualquier componente, debe instalar Visual Studio Code y Microsoft Power Platform CLI como se describe aquí: Requisitos previos

Nota

Si ya tiene instalada la CLI Power Platform para Windows, asegúrese de que está ejecutando la última versión usando el comando pac install latest. Power Platform Tools para Visual Studio Code se debería actualizar automáticamente.

Crear un componente React

Nota

Estas instrucciones esperan que haya creado componentes de código antes. Si no lo ha hecho, consulte este tutorial: Crea tu 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 (predeterminada)

El siguiente comando de PowerShell usa los accesos directos de parámetros y crea un proyecto de componente React y ejecutará 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 arnés de prueba como de costumbre usando 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

El atributo control elementcontrol-type se establece en virtual en lugar de en standard.

Nota

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

Dentro de elemento de recursos, encontrará dos nuevos elementos secundarios elemento platform-library como los siguientes:

<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.

Recomendamos usar las bibliotecas de la plataforma Fluent 8 y 9. Si no usa Fluent, debe eliminar el elemento platform-library donde el valor del atributo name 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 cambio ReactControl.updateView devuelve un ReactElement que tiene los detalles del control real en formato React.

bundle.js

Las bibliotecas React y Fluent no están incluidas en el paquete porque son compartidas, por lo tanto, el tamaño de bundle.js es 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.

Sample Description Vincular
ChoicesPickerReact El estándar ChoicesPickerControl convertido para ser un control React. Muestra ChoicesPickerReact
FacepileReact El ReactStandardControl convertido para ser un control React. FacepileReact

Lista de bibliotecas de plataformas admitidas

Las bibliotecas de plataforma están disponibles tanto en el momento de la compilación como en el tiempo de ejecución para los controles que utilizan la capacidad de las bibliotecas de plataforma. Actualmente, la plataforma proporciona las siguientes versiones y son las versiones más altas admitidas actualmente.

Name npm package name Rango de versiones permitidas Versión cargada
React react 16.14.0 17.0.2 (Modelo), 16.14.0 (Lienzo)
Fluent @fluentui/react 8.29.0 8.29.0
Fluent @fluentui/react-components >=9.4.0 <=9.46.2 9.46.2

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. Fluent 8 y Fluent 9 son compatibles, pero no se pueden especificar ambos en el mismo manifiesto.

Preguntas frecuentes

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

R: No. Debe crear un nuevo control usando la nueva plantilla y luego actualizar los métodos manifest e index.ts. Como referencia, compare el estándar y las muestras de React descritas anteriormente.

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

R: No. Actualmente, los controles y bibliotecas de plataforma de React solo son compatibles con aplicaciones basadas en modelos y lienzos. 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 generar un componente de código
Más información sobre Power Apps component framework
Usar componentes de código en Power Pages