How to Use React 19 in Power Apps PCF Components

The Power Apps Component Framework – PCF for short – lets you create complex custom components using traditional web development tools like HTML, CSS, and JavaScript.

When creating a new PCF project, you can choose from two types of controls: standard controls and React virtual controls. For non-trivial components, React is often a good choice because it abstracts away much of the heavy DOM manipulation. But, when you’re using React with PCF, you’re currently limited to React 16 in Canvas apps and React 17 in Model-Driven apps.

That doesn’t mean you can’t use a newer version – but doing so means opting out of virtualization support. For many PCF components, that trade-off is usually acceptable.

In this article, I’ll show you how to integrate the latest version of React (v19) with your PCF component. We’ll install the necessary dependencies and configure the component to take full advantage of the latest version of React.

This article assumes that you:

• Understand how to use the PAC CLI to create PCF projects.

• Are comfortable using the command line and a code editor (for example, VS Code)

• Know the basics of React

• Have some experience with PCF development

Note: You don’t need access to a Power Platform environment unless you want to deploy the component. The built-in test harness will be sufficient to follow along with this article.

In this tutorial, you will:

• Create a PCF Project

• Install the React Dependencies

• Create a Non-React Button

• Create a React Button

• Add the React Button to the PCF Component

• Render the React Button When the PCF Component Updates

Create a PCF Project

To create a PCF project, you’ll use the PAC CLI. If you haven’t installed it yet, follow the instructions here.

From the directory of your choice, create a new folder for this project, and then open your terminal and run:

pac pcf init -ns SampleNameSpace -n SampleComponent --template field

Once it finishes, run:

npm install

This installs the default project dependencies.

So why didn’t we use the --framework flag to specify React during project creation? Because that flag sets up a React virtual control, which only supports React 16/17. Instead, we’re creating a standard control and installing React ourselves.

Install the React Dependencies

To use React 19, you’ll need four dependencies:

• react

• react-dom

• @types/react

• @types/react-dom

These last two provide TypeScript typings for React. Install the above dependencies with:

npm install -D react react-dom @types/react @types/react-dom

You can verify the installation by looking at the package.json file in the project.

While not necessary for what we will be doing, in order to use some newer React features, you may need to tweak the compilerOptions in the tsconfig.json file to include the line below:

<span class="hljs-string">"jsx"</span>: <span class="hljs-string">"react-jsx"</span>

Here is what the tsconfig.json file should look like with the added jsx line:

Create a Non-React Button

Let’s verify that everything works before we introduce React.

From the command line, run:

npm run start:watch

This may take a moment. It will open a browser showing your PCF test harness. You’ll likely see an empty screen. That’s expected – we haven’t rendered anything yet.

Open index.ts in the SampleComponent folder. This file contains a class that implements the PCF standard control interface. Let’s create a basic non-React button.

Update the init method in the index.ts file like this:

<span class="hljs-keyword">public</span> init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: <span class="hljs-function">() =></span> <span class="hljs-built_in">void</span>,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
): <span class="hljs-built_in">void</span> {
    <span class="hljs-comment">// A basic button with vanilla JS and the DOM</span>
    <span class="hljs-keyword">const</span> btn = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'button'</span>);
    btn.textContent = <span class="hljs-string">'Click me!'</span>;
    container.appendChild(btn);

    <span class="hljs-comment">// A simple event lister for button clicks</span>
    btn.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function">() =></span> {
        alert(<span class="hljs-string">'Button clicked!'</span>);
    });
}

Now, head back to your test harness. You should see a button. Clicking it should display an alert.

Create a React Button

Next, let’s replace our plain DOM code with React.

Delete the button code from init(), leaving the init method empty.

Then, create a new file: Button.tsx. Inside Button.tsx, add the code below. This component will accept a label prop and emit an onClick event. Make sure to export the function.

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Button</span>(<span class="hljs-params">props: { label: <span class="hljs-built_in">string</span>; onClick: () => <span class="hljs-built_in">void</span> }</span>) </span>{
    <span class="hljs-keyword">return</span> <button onClick={props.onClick}>{props.label}</button>;
}

Add the React Button to the PCF Component

In index.ts, update the file to:

1. Import createRoot from react-dom/client

2. Import the Button component

3. Render the Button component

Here is the minimal example:

<span class="hljs-keyword">import</span> { createRoot } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom/client'</span>; <span class="hljs-comment">// import the createRoot method</span>
<span class="hljs-keyword">import</span> Button <span class="hljs-keyword">from</span> <span class="hljs-string">'./Button'</span>; <span class="hljs-comment">//import the button.tsx component we just created</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SampleComponent
    <span class="hljs-keyword">implements</span> ComponentFramework.StandardControl<IInputs, IOutputs>
{
    <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>) {
        <span class="hljs-comment">// Empty</span>
    }
    <span class="hljs-keyword">public</span> init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: <span class="hljs-function">() =></span> <span class="hljs-built_in">void</span>,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): <span class="hljs-built_in">void</span> {
        <span class="hljs-comment">// Add the code below to create a React root that allows us to render our button component.</span>
        <span class="hljs-keyword">const</span> root = createRoot(container);
        root.render(
            Button({ label: <span class="hljs-string">'React Button'</span>, onClick: <span class="hljs-function">() =></span> alert(<span class="hljs-string">'React Button Clicked!'</span>) })
        );
    }
    <span class="hljs-comment">// Other methods here...</span>
}

You should now see “React Button” in the browser. Clicking it will trigger the alert.

Render the React Button When the PCF Component Updates

Many PCF components receive dynamic input values. If the inputs change, we want the React component to re-render. This is where updateView() comes in. updateView() is triggered when the PCF property bag changes.

Let’s move the rendering logic from init() to updateView().

First, import Root from react-dom/client, and initialize root as a property of the class.

<span class="hljs-keyword">import</span> { createRoot, Root } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom/client'</span>; <span class="hljs-comment">//add Root as an import</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SampleComponent <span class="hljs-keyword">implements</span> ComponentFramework.StandardControl<IInputs, IOutputs> {
    root: Root; <span class="hljs-comment">// initialize the root property on the SampleComponent class</span>
    <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>) {
        <span class="hljs-comment">// Empty</span>
    }
    <span class="hljs-comment">// other methods here...</span>
}

Then, modify init() to set this.root to the root created by React’s createRoot method. Move the rendering logic from the init method to updateView(), replacing root with this.root.

<span class="hljs-keyword">public</span> init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: <span class="hljs-function">() =></span> <span class="hljs-built_in">void</span>,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
    ): <span class="hljs-built_in">void</span> {
        <span class="hljs-built_in">this</span>.root = createRoot(container); <span class="hljs-comment">// assign the root React creates to this.root</span>
    }

<span class="hljs-keyword">public</span> updateView(context: ComponentFramework.Context<IInputs>): <span class="hljs-built_in">void</span> {
    <span class="hljs-comment">// render the React button component, by referencing this.root</span>
    <span class="hljs-built_in">this</span>.root.render(
        Button({ label: <span class="hljs-string">'React Button'</span>, onClick: <span class="hljs-function">() =></span> alert(<span class="hljs-string">'Button Clicked!'</span>) })
    );
}

With the above setup, React will now re-render your button when the property bag of a PCF component changes.

Wrapping Up

You’ve now created a PCF component that uses the latest version of React! By installing and configuring React manually, you avoid the version limitations of Microsoft’s built-in React controls – unlocking the power of modern React features.

While this setup doesn’t support virtualization, for many components that’s a fair trade-off for modern tooling and maintainability.

If you’re building PCF components beyond simple DOM manipulation, React can be a powerful way to improve your development workflow and UI flexibility.

Enjoyed this article? I write regularly about low-code, development patterns, and practical tech topics at scriptedbytes.com

Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More