React controls & platform libraries (Preview)

[This topic is pre-release documentation and is subject to change.]

You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you are using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent libraries individually for each control. All controls will share a common library instance and version to provide a seamless and consistent experience.

By re-using the existing platform React and Fluent libraries, you can expect the following benefits:

  • Reduced control bundle size
  • Optimized solution packaging
  • Faster runtime transfer, scripting and control rendering

With the benefits available by re-using these component resources, we expect this approach will become the preferred way all Power Apps code components will be created after this feature reaches general availability.

Prerequisites

Just as with any component, you must install Visual Studio Code and the Microsoft Power Platform CLI as described here: Prerequisites

Note

If you have already installed the Standalone Power Platform CLI, make sure you are running the latest version by using the pac install latest command. The Power Platform Tools for Visual Studio Code should update automatically.

Create a React component

Note

These instructions expect that you have created code components before. If you have not, see this tutorial: Create your first component

There is a new --framework (-fw) parameter for the pac pcf init command. Set the value of this parameter to react.

The following table shows the long form of the commands:

Parameter Value
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (default)

The following PowerShell command uses the parameter shortcuts and will create a React component project and run npm-install in the folder where you run the command:

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

You can now build and view the control in the test harness as usual using npm start.

After you build the control you can package it inside solutions and use it for model-driven apps (including custom pages) and canvas apps like standard code components.

Differences from standard components

These are the differences between a React component and a standard component.

ControlManifest.Input.xml

The control element control-type attribute is set to virtual rather than standard.

Note

Changing this value does not convert a component from one type to another.

Within the resources element, you will find two new platform-library element child elements like the following:

<resources>
    <code path="index.ts" order="1" />
	<platform-library name="React" version="16.8.6" />
	<platform-library name="Fluent" version="8.29.0" />
</resources>

Note

Do not change the version numbers for these platform-library elements. These are the versions used by the platform.

We recommend using Fluent platform libraries. If you don't use Fluent, you should remove this element: <platform-library name="Fluent" version="8.29.0" />

Index.ts

The ReactControl.init method for control initialization does not have div parameters because these controls do not render the DOM directly. Instead ReactControl.updateView returns a ReactElement which has the details of the actual control in React format.

bundle.js

React and Fluent libraries are not included in the package because they are shared, therfore the size of bundle.js is significantly smaller.

Sample controls

You can find two new controls added to the samples as part of this preview. Functionally, they are the same as their standard version but will have much better performance.

Sample Description Link
ChoicesPickerReact The standard ChoicesPickerControl converted to be a React Control. ChoicesPickerReact Sample
FacepileReact The ReactStandardControlconverted to be a React Control. FacepileReact

FAQ

Q: Can I convert an existing standard control to a React control using platform libraries?

A: No. You must create a new control using the new template and then update the manifest and index.ts methods. For reference, compare the standard and react samples described above.

What are code components?
Code components for canvas apps
Create and build a code component
Learn Power Apps component framework
Use code components in Power Apps portals