Controles do React e bibliotecas de plataforma

Ao usar o React e as bibliotecas de plataforma, você usa a mesma infraestrutura que a plataforma Power Apps. Essa infraestrutura significa que você não precisa mais empacotar bibliotecas React e Fluent individualmente para cada controle. Todos os controles compartilham uma instância e uma versão de biblioteca comuns, o que fornece uma experiência perfeita e consistente.

Reutilizando as bibliotecas react e fluent da plataforma existente, você pode esperar os seguintes benefícios:

  • Controle reduzido do tamanho do pacote
  • Empacotamento otimizado de solução
  • Transferência em tempo de execução mais rápida, criação de scripts e renderização de controle
  • Design e alinhamento de tema com o sistema de design do Power Apps Fluent

Com esses benefícios, espera-se que essa abordagem se torne a maneira preferida de criar todos os componentes de código Power Apps depois que esse recurso atingir a disponibilidade geral.

Pré-requisitos

Assim como acontece com qualquer componente, instale Visual Studio Code e a CLI Microsoft Power Platform conforme descrito em Pré-requisitos.

Note

Se você já instalou a CLI do Power Platform para Windows, verifique se está executando a versão mais recente usando o pac install latest comando. As Ferramentas do Power Platform para Visual Studio Code devem ser atualizadas automaticamente.

Criar um componente react

Note

Essas instruções esperam que você já tenha criado componentes de código antes. Se ainda não o fez, confira este tutorial: Crie seu primeiro componente.

Há um novo --framework parâmetro (-fw) para o comando pac pcf init . Defina o valor desse parâmetro como react.

A tabela a seguir mostra a forma longa dos comandos:

Parameter Value
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (predefinição)

O comando do PowerShell a seguir usa os atalhos de parâmetro, cria um projeto de componente React e executa npm-install na pasta em que você executa o comando:

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

Agora você pode criar e exibir o controle no ambiente de teste como de costume usando npm start.

Depois de criar o controle, você pode empacotá-lo dentro de soluções e usá-lo para aplicativos baseados em modelo (incluindo páginas personalizadas) e aplicativos de tela do Power Apps, como componentes de código padrão.

Diferenças em relação aos componentes padrão

Esta seção descreve as diferenças entre um componente react e um componente padrão.

ControlManifest.Input.xml

Defina o atributo do control-type como virtual em vez de standard.

Note

Alterar esse valor não converte um componente de um tipo para outro.

No elemento resources, localize dois novos elementos filho do elemento platform-library , como o exemplo a seguir:

<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

Para obter mais informações sobre versões válidas da biblioteca de plataforma, consulte a lista de bibliotecas de plataforma com suporte.

Use bibliotecas de plataforma para o Fluent 8 e 9. Se você não usar Fluent, remova o elemento platform-library em que o valor do atributo name é Fluent.

Index.ts

O método ReactControl.init para inicialização de controle não tem parâmetros div porque os controles React não renderizam o DOM diretamente. Em vez disso, ReactControl.updateView retorna um ReactElement que tem os detalhes do controle real no formato React.

bundle.js

O pacote não inclui bibliotecas React e Fluent porque elas são compartilhadas. Esse compartilhamento torna o tamanho de bundle.js menor.

Controles de exemplo

Os controles a seguir são incluídos nos exemplos. Eles funcionam da mesma forma que suas versões padrão, mas oferecem melhor desempenho, pois são controles virtuais.

Amostra Description Vínculo
ChoicesPickerReact O ChoicesPickerControl padrão foi convertido em um controle React. Exemplo de ChoicesPickerReact
FacepileReact O ReactStandardControl foi convertido em um controle React. FacepileReact

Lista de bibliotecas de plataforma com suporte

As bibliotecas de plataforma estão disponíveis no build e no runtime para os controles que usam a funcionalidade de bibliotecas de plataforma. Atualmente, a plataforma fornece as seguintes versões, que são as versões mais recentes suportadas.

Nome Nome do pacote npm Intervalo de versão permitido Versão carregada
React reagir 16.14.0 17.0.2 (Model), 16.14.0 (Canvas)
Fluente @fluentui/react 8.29.0 8.29.0
Fluente @fluentui/react 8.121.1 8.121.1
Fluente @fluentui/react-components >=9.4.0 <=9.46.2 9.68.0

Note

O aplicativo pode carregar uma versão compatível mais alta de uma biblioteca de plataforma em runtime, mas a versão pode não ser a versão mais recente disponível. Você pode especificar Fluent 8 ou Fluent 9 no manifesto, mas não ambos.

perguntas frequentes

P: Posso converter um controle padrão existente em um controle React usando bibliotecas de plataforma?

R: Não. Você deve criar um novo controle usando o novo modelo e, em seguida, atualizar o manifesto e os métodos em index.ts. Para referência, compare os exemplos padrão e React descritos na seção anterior.

P: Posso usar controles react e bibliotecas de plataforma com Power Pages?

R: Não. Atualmente, os controles react e as bibliotecas de plataforma funcionam apenas com aplicativos baseados em tela e aplicativos orientados por modelo. Em Power Pages, os controles React não são atualizados com base em alterações em outros campos.

O que são componentes de código?
Componentes de código para apps de canvas
Criar e construir um componente de código
Conheça a estrutura de componentes do Power Apps
Usar componentes de código no Power Pages

  • Última atualização em