Step 7

In this application, we will use the Material UI library for React. This library allows us to use Google's Material Design system to style our React application.

Stop the app and install the following dependencies: 

npm install @material-ui/core @material-ui/icons

Next, update the index.html file as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>QuickNote App</title>
+   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Finally, update the index.js file: 

import ReactDOM from "react-dom";
import App from "./App";
import {CssBaseline} from "@material-ui/core";

ReactDOM.render(
  <>
    <CssBaseline />
    <App />
  </>,
  document.getElementById("root")
);

The <CssBaseline /> resets the default styling of your browser and normalizes the styles for the best viewing experience over different browsers and platforms.

Save the files and run the React app.