Using the MUI component library

MUI (https://mui.com/) is the React component library that implements Google's Material Design language. In this book, we are using MUI version 5, and if you are using some other version, you should follow the official documentation. MUI contains a lot of different components—such as buttons, lists, tables, and cards—that you can use to achieve a nice and uniform user interface (UI).

We will create a small shopping list app and style the UI using MUI components, as follows:

1. Create a new React app called shoppinglist by running the following command:

   npx create-react-app shoppinglist

2. Open the shopping list app with VS Code. Install MUI by typing the following command in the project root folder to PowerShell or any suitable terminal you are using:

   npm install @mui/material @emotion/react @emotion/styled

3. Open the App.js file and remove all the code inside the App div tag. Now, your App.js file should look like this, and...