Chapter 11. Styling the Frontend with React Material-UI

This chapter explains how to use Material-UI components in our frontend. We will use the Button component to show the styled buttons. The modal form input fields are replaced by TextField components, which have many nice features. Material-UI provides the Snackbar component, which can show the toast messages to an end user. We replace the react-toastify component with Snackbar to get a uniform outlook. Finally, we use the AppBar component instead of the React app header.

In this chapter, we will look at the following:

• What is Material-UI?
• How to use Material-UI components in our frontend
• How to remove unused components in the React app

Technical requirements

The Spring Boot application that we created in Chapter 4, Securing and Testing Your Backend, is needed with the modification from the previous chapter (the unsecured backend).

We also need the React app that we used in the previous chapter (carfront).

Using the Button component

Install Material-UI by typing the following command into the terminal you are using and starting your app after the installation is finished:

npm install @material-ui/core --save

Let's first change all the buttons to use the Material-UI Button component. Import the Button to the AddCar.js file:

// AddCar.js
import Button from '@material-ui/core/Button';

Change the buttons to use the Button component. In the list page, we are using the primary button and in the modal form, the outline buttons:

  render() {
    return (
      <div>
        <SkyLight hideOnOverlayClicked ref="addDialog">
          <h3>New car</h3>
          <form>
            <input type="text" placeholder...

Summary

In this chapter, we finalized our frontend using Material-UI. Material-UI is the React component library that implements Google's Material Design. We replaced all the buttons with the Material-UI Button components. Our modal form got a new look by using the Material-UI TextField component. We removed the React app header and used the AppBar component instead. The messages to the end user are now shown using the Snackbar component. After these modifications, our frontend looks more professional and uniform. In the next chapter, we will focus on frontend testing.

Questions

1. What is Material-UI?
2. How should you use different Material-UI components?
3. How should you remove unused components?

Further reading

Packt has other great resources for learning about React:

• https://www.packtpub.com/web-development/getting-started-react
• https://www.packtpub.com/web-development/react-16-essentials-second-edition