Adding a React component to an application customizer

Git branch

This section uses the https://github.com/PacktPublishing/Mastering-SharePoint-Development-with-the-SharePoint-Framework-/tree/chapter10/adding-react-component-to-application-customizer Git branch from the repository.

In this section, we will see how to add a React component in an application customizer to render the content in the top placeholder. By the end of this section, we will be able to see text in the top placeholder, rendered using React instead of simple HTML.

As stated in Chapter 4, Requirement 3, the requirement is related to showing the application customizer at the top of the page when products are low in stock (i.e., below 10). To do this, we will create a React component called LowStockInformer and show some text to say that products A, B, and C are low in stock.

React installation

Since React has already been installed in the solution, we can start using it straight away. However, if you...