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're 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 share a common library instance and version to provide a seamless and consistent experience.
By reusing 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 reusing 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.
If you have already installed Power Platform CLI for Windows, 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
These instructions expect that you have created code components before. If you have not, see this tutorial: Create your first component
There's a new
-fw) parameter for the pac pcf init command. Set the value of this parameter to
The following table shows the long form of the commands:
The following PowerShell command uses the parameter shortcuts and creates 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
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
Thi section describes the differences between a React component and a standard component.
The control element
control-type attribute is set to
virtual rather than
Changing this value does not convert a component from one type to another.
<resources> <code path="index.ts" order="1" /> <platform-library name="React" version="16.8.6" /> <platform-library name="Fluent" version="8.29.0" /> </resources>
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" />
The ReactControl.init method for control initialization doesn't have
div parameters because these controls don't render the DOM directly. Instead ReactControl.updateView returns a ReactElement that has the details of the actual control in React format.
React and Fluent libraries aren't included in the package because they're shared, therefore the size of bundle.js is smaller.
You can find two new controls added to the samples as part of this preview. Functionally, they're the same as their standard version but have better performance.
|ChoicesPickerReact||The standard ChoicesPickerControl converted to be a React Control.||ChoicesPickerReact Sample|
|FacepileReact||The ReactStandardControlconverted to be a React Control.||FacepileReact|
Supported platform libraries list
Platform libraries are made available both at the build and runtime to the controls that are using platform libraries capability. Currently, the following versions are provided by the platform and these can also be found in the control manifest.
|Name||npm package name||Version|
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.
Q: Can I use React controls & platform libraries with Power Pages?
A: No. React controls & platform libraries are currently only supported for canvas and model-driven apps. In Power Pages, React controls don't update based on changes in other fields.