Introdução ao uso do React em um componente do Power Apps

10 minutos

React é uma estrutura de cliente padronizada para criação de interfaces do usuário. Fornece uma maneira declarativa de criar IUs interativas e um mecanismo para encapsular componentes a fim de criar IUs complexas que gerenciam estados de componentes e têm alta interatividade. Como o React é escrito em JavaScript, você pode usá-lo em um componente do Power Apps.

Se você é iniciante no React, vá para React, que fornece uma variedade de tutoriais e recursos sobre como criar componentes do React.

Preparar seu computador para componentes de código

Para preparar seu computador para compilar componentes de código, execute estas etapas:

Instale o npm (incluído no Node.js) ou o Node.js (incluído no npm). Recomendamos que você use uma versão de LTS (Suporte de Longo Prazo).
Instale o Visual Studio Code.
Instale a extensão Power Platform Tools.
Instale as Ferramentas de Build para o Visual Studio em Downloads do Visual Studio.

Fluent UI

Um dos muitos avanços excelentes da Microsoft foi a implementação da Fluent UI, uma coleção de estruturas de UX que você pode usar para criar experiências fluentes que se ajustam perfeitamente a uma ampla variedade de produtos da Microsoft. O uso da Fluent UI no componente de código do Power Apps é tão simples quanto fazer referência às suas bibliotecas, além de fornecer uma versão específica do React que você possa usar. Para obter mais informações, consulte Fluent UI.

Implementar um componente FacePile de exemplo

Importante

Baixe o arquivo zip FacePileComponent.zip para usar neste exercício. Extraia os arquivos compactados.

Neste exemplo, você cria um componente que usa o componente FacePile Fluent UI. O FacePile mostra uma lista de faces ou iniciais de maneira horizontal, em que cada círculo representa uma pessoa.

Um exemplo prático de quando você poderia usar esse recurso é para listar os colaboradores de um artigo ou registro, como o que você veria no Microsoft Learn, conforme mostrado na imagem a seguir.

Captura de tela do componente FacePile Fluent UI.

Criar um novo projeto de componente

Para criar um projeto de componente, siga estas etapas:

Crie um diretório em que você cria seu componente. Neste exemplo, você coloca o componente em C:\users\username\source\face-pile; no entanto, você pode criar seu próprio diretório. Para criar seu próprio diretório, você usa o Visual Studio Code.
Inicie o Visual Studio Code.
Selecione Terminal e Novo Terminal e mude o shell do Terminal para o Prompt de Comando.

Observação

Se você não estiver familiarizado com o Terminal no Visual Studio Code, acesse Noções básicas do Terminal para saber mais.
Crie sua pasta de origem.
```
md \source
```
Altere o diretório para sua pasta de origem.
```
cd \source
```
No diretório de origem, crie um diretório chamado face-pile.
```
md face-pile
```
Mude para o diretório que você criou.
```
 cd face-pile
```
Agora você deve estar no novo diretório que criou.

Inicialize o projeto de componente usando a Power Platform CLI com o comando a seguir.

pac pcf init --namespace Learn --name ReactFacePile --template field --framework React

Instale as ferramentas de compilação de projeto usando o comando npm install. Podem ser exibidos alguns avisos; no entanto, você pode ignorá-los com segurança.
```
npm install
```
Execute o comando a seguir para abrir o projeto no Visual Studio Code.
```
code -a .
```
O projeto deve ser semelhante à imagem a seguir.

Implementar a lógica do seu componente de código

Para implementar a lógica do seu componente de código, siga estas etapas:

Expanda a pasta ReactFacePile e abra o arquivo ControlManifest.Input.xml.

Localize o nó property e substitua-o pelo XML a seguir.

<property name="numberOfFaces" display-name-key="numberOfFaces_Display_Key" description-key="numberOfFaces_Desc_Key" of-type="Whole.None" usage="bound" required="false" />

Localize resources e retire as marcas de comentário de css e resx.
Verifique se você ainda tem o arquivo ControlManifest.Input.xml selecionado e selecione New Folder.
Nomeie a nova pasta como components.
Vá para a pasta em que você extraiu o arquivo FacePileComponent.zip baixado e abra a pasta FacePileComponent.
Arraste os arquivos na pasta FacePileComponents e solte-os na pasta components que você criou.
Agora, a pasta de componentes deve ter dois arquivos.
Abra o arquivo Index.ts.

Substitua import { HelloWorld, IHelloWorldProps } from "./HelloWorld"; por este trecho.

import { FacepileBasicExample, IFacepileBasicExampleProps } from "./components/Facepile" ;

Após as importações, adicione a constante a seguir.
```
const DEFAULT_NUMBER_OF_FACES = 3;
```

Adicione o trecho antes do construtor.

private props: IFacepileBasicExampleProps = {
    numberFacesChanged: this.numberFacesChanged.bind(this),
};

As alterações feitas devem ser semelhantes à imagem a seguir.
Localize o método init e inclua o trecho a seguir após this.notifyOutputChanged = notifyOutputChanged; line
```
this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
```

Substitua o método updateView pelo método a seguir.

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
    if (context.updatedProperties.indexOf("numberOfFaces") > -1) {
        this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
    }
    return React.createElement(FacepileBasicExample, this.props);
}

Os métodos init e updateView agora devem ser semelhantes à imagem a seguir.

Substitua o método getOutputs pelo método a seguir.

public getOutputs(): IOutputs {
    return {
        numberOfFaces: this.props.numberOfFaces,
    };
}

Adicione o método a seguir após o método destroy.

private numberFacesChanged(newValue: number) {
    if (this.props.numberOfFaces !== newValue) {
        this.props.numberOfFaces = newValue;
        this.notifyOutputChanged();
    }
}

Selecione Arquivo e Salvar Tudo para suas alterações.

Adicionar estilo ao seu componente de código

Para adicionar estilo ao seu componente de código, siga estas etapas:

Selecione o arquivo ControlManifest.Input.xml e, depois, New Folder.
Nomeie a nova pasta como css.
Selecione a pasta css que você criou e, depois, Novo Arquivo.
Nomeie o novo arquivo como ReactFacePile.css.

Abra o arquivo ReactFacePile.css que você criou e cole o trecho de CSS a seguir.

msFacepileExample {
max-width: 300px;
}
.msFacepileExample .control {
 padding-top: 20px;
}
.msFacepileExample .ms-Dropdown-container, .msFacepileExample.ms-Slider {
margin: 10px 0 10px 0;
}
.msFacepileExample .ms-Dropdown-container .ms-Label {
padding-top: 0;
}
.msFacepileExample .ms-Checkbox {
padding-top: 15px;
}
.exampleCheckbox {
margin: 10px 0;
}
.exampleLabel {
margin: 10px 0;
}

Selecione Arquivo e Salve suas alterações.
Selecione o arquivo ControlManifest.Input.xml e, depois, New Folder.
Nomeie a nova pasta como strings.
Vá para a pasta em que você extraiu o arquivo FacePileComponent.zip baixado e abra a pasta FacePileStrings.
Arraste o arquivo ReactFacePile.1033.resx e solte-o na pasta strings que você criou.
A pasta strings agora deve ter o arquivo resx.
Selecione Arquivo e Salve suas alterações.
Vá para o terminal e execute este comando de compilação.
```
npm run build
```
Observação

Se você receber um erro informando que o JSX não está definido, abra o arquivo .eslintrc.json. Na linha 11: "ComponentFramework": true, adicione uma vírgula e, depois, uma nova linha com "JSX": true. Na linha 41: altere JSX.Element para React.JSX.Element. Salve as alterações e repita o comando npm run build.
A compilação deve ser concluída com êxito.
Teste os componentes executando o comando a seguir.
```
npm start
```
O agente de teste deve abrir uma nova janela do navegador.
O componente deve ser semelhante à imagem a seguir.
Altere o tamanho do contêiner para 500 x 220 e mova o controle deslizante para 5.
O componente agora deve ser semelhante à imagem a seguir. Feche a janela do navegador do agente de teste.
Feche a janela do navegador do agente de teste.
Retorne ao terminal e interrompa o observador pressionando [CONTROL] + C.
Digite Y e pressione [ENTER].

Para obter mais informações, vá para Implementar o componente FacePile.

Comentários

Esta página foi útil?