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
Join the conversation! Your thoughts help the community grow.