cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PowerApps Staff GregHurlmanMSFT
PowerApps Staff

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!

4 REPLIES 4
douglasromao
Level 8

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

Really nice!

renatooromao
Level: Powered On

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

It's very good! 

Asgard
Level: Power Up

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

In my component.tsx I have simply:

render(): JSX.Element {

  return (<div />);

}

I get an error from "div": "Cannot use namespace 'ComponentFramework' as a value."

Any ideas?

PowerApps Staff GregHurlmanMSFT
PowerApps Staff

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

Did you try to add React support to a project that had been created by an older version of the pac CLI tool by any chance?

 

Can you post your CLI tool version (just run pac w/o any parameters), your project's tsconfig.json file, and the ./node_modules/pcf-scripts/tsconfig_base.json in your project's node_modules directories as well?

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Users Online
Currently online: 222 members 4,971 guests
Recent signins:
Please welcome our newest community members: