Appendix: React

React setup

Setting up a React development environment has, in the past, been a rather time-consuming and delicate operation. Getting React to work properly with TypeScript in the past only seemed to add to this complexity.

The React community, however, has introduced a set of handy utilities to make setting up a React development environment a breeze.

We can create a fully-fledged React application, complete with unit testing and TypeScript integration, by running the following command:

npx create-react-app my-app --template typescript

Here, we are running the create-react-app script directly with npx instead of installing it globally. We have provided the name of the directory for the React app, which is product-list, and we have also specified that we wish to use the TypeScript template. After a few minutes, the create-react-app script will complete. To start our newly created React application, we will need to change into the product-list directory and then start the React development environment as follows:

cd product-list
npm start

Installing Material-UI library

On a local machine, before we do this, we need to install the Material-UI library built for React, which will give us access to a wide range of standard components, such as buttons and input controls, as follows:

npm install @mui/material
npm install @mui/icons-material

Here, we are installing the React Material-UI core package, as well as the icons package.