Use of React and Office UI Fabric React in the PowerApps component framework is now available for public preview

Today we have released support for one of our most popular feedback requests into public preview, allowing PowerApps component framework developers the ability to use React to build their components. This is a big step in allowing 3rd party developers to use components that they have already built for other applications with just a few changes needed to get those components hosted by and communicating with the framework. Let’s take a look at what you need to do to create a framework component that uses React and Office UI Fabric.

This is the first step in React support, and our current approach bundles React (like any other 3rd party JavaScript libraries) as part of your overall control JavaScript package. This means that for now, each control package gets its own React DOM tree. However, we will be adding native support for integrating into the Model-Driven PowerApps host application React DOM in coming releases.

If you have not yet updated to the latest public preview tools, or do not yet have the PowerApps CLI and NPM, please follow the tooling documentation to get updated. You can also grab a copy of the updated sample control code (including a React sample) as well.

Let’s create a new framework component, add React and Office UI Fabric, and get it running in the debug harness.

Create the component and add React and Office UI Fabric React

From a command line, run these commands to create a directory for your new project get a new framework component project created with a name of MyReactComponent using the field template. The final two commands add React and Office UI Fabric and the TypeScript typing files for React.

mkdir MyReactComponent
cd MyReactComponent
pac pcf init --namespace MyComponents --name MyReactComponent --template field
npm install
npm install react react-dom office-ui-fabric-react
npm install @types/react --save-dev

Implement React for your component

Our sample control code and documentation have an example of how you can implement React; React bundling will be one of the supported ways to use a custom React version for components going forward. Controls built using the current patterns will be supported as we release into general availability.

There are a few things to keep in mind as you implement your components:

• DO keep the root control file, index.ts, as a plain TypeScript file; it is not supported as a TSX file at this time.
• DO Follow the pattern of React without JSX to render your root component in the updateView function of your framework component, as seen in the sample documentation:

  ReactDOM.render(
    React.createElement(
      FacepileBasicExample,
      this.props
    ),
    this.theContainer
  );

  In the example above, FacepileBasicExample is the type of the React component, this.props refers to the properties being passed to the React element being created, and this.container refers to the div element that will contain the rendered framework component.

• DO pass event handlers in your React component’s props to manage framework code to React code communication, so that the code in your React component can pass back information to the framework component to allow the component to do something with that information, such as notify the framework to save the changes.

Let us know what you think!

React support has been one of our loudest and most consistent pieces of feedback throughout the public preview, and we are super excited to see what our community will do with this new functionality available to them. If you have questions or other feedback about this or any other framework feature, let us know on the PowerApps component framework forum; we look forward to hearing from you!