Using React and Fluent UI to build code components

React is an open source JavaScript library that helps you build user interface libraries and components. Fluent UI, on the other hand, is a cross-platform design system created by Microsoft that provides you with a framework to create user interfaces that include accessibility, internationalization, and performance.

Most of the code components on PCF Gallery are created using React because it provides a rich user interface. In this section, we will be building a simple user persona with an adjustable size that can be controlled by a slider. This code component will use both React and Fluent UI.

First, we need to initialize a PCF project. In order to do this, we will use PCF Builder for VS Code. Here are the steps to create the project:

1. Start your command palette using the keyboard shortcut Ctrl + Shift + P.
2. Search for PCF Builder, and select Initialize Component (Simple).
3. Enter PowerMeUp as a namespace.
4. Enter...