In this section, we'll replace the React app header with an AppBar component. Import the AppBar and Toolbar components:

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

Remove the div header element from the App.js file. Add the AppBar component to the render() method and place the Toolbar component inside it. The Toolbar component contains the text shown in the app bar:

// App.js
import React, { Component } from 'react';
import './App.css';
import Carlist from './components/Carlist';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

class App extends Component {
  render() {
    return (
      <div className="App">
        <AppBar position="static" color="default">
          <Toolbar>CarList</ Toolbar>
        </ AppBar>
        <Carlist /> 
      </div>
    );
  }
}

export default App;

Now, your frontend should look like the following: