PowerApps Component Framework (PCF) + React

Create a PCF Component and add React

Prerequisites

Knowledge of essential PCF components. If you need to, please take a look at the PowerApps Component Framework article.

Initialize and create a project

You can open your preferred CLI and navigate to the folder.

pac pcf init -n "name" -ns "namespace" -t [dataset or field]

• "name" (-n) is a project name.
• "namespace" (-ns) is the namespace for the project.
• "type" (-t) can either be a dataset or a field.

Install core React Packages

npm install react react-dom

Install type definitions for the above packages as dev dependencies

npm install --save-dev @types/react @types/react-dom

Create a React Component

It is advisable to create a separate folder to keep all React components.

• Created folder "MyReactComponents"
• Created a file "ReactComponents.tsx"
• Updated the newly added file to add the react component.

Render a react component

Update index.ts file to render a react component

• On top of the file, import React and React-dom.
• Created a private variable "_dvContainer".
• In the init function, set the value of "_dvcontainer" to be the container(init function gets as a parameter)
• In the updateView function, use ReactDOM and React.createElement to create and render “MyReactComponent”.
• Save the changes, and it's done.

Run the code

Run the command to compile and run the code locally. We can see the react component rendered as part of the PCF component.

npm start watch

Output