Controles React y bibliotecas de plataforma (versión preliminar)

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Puede lograr mejoras significativas en el rendimiento utilizando React y las bibliotecas de la plataforma. 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

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.

Requisitos previos

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

Crear un componente React

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:

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

Esta sección describe las diferencias entre un componente React y un componente estándar.

ControlManifest.Input.xml

El atributo control element control-type se establece en virtual en vez de en standard.

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.8.6" />
   <platform-library name="Fluent" version="9.46.2" />
</resources>

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

Puede encontrar dos nuevos controles agregados a las muestras como parte de esta vista previa. Funcionalmente, son iguales a su versión estándar pero tienen un rendimiento mucho mejor.

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.

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.

Artículos relacionados

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