As the name implies, functional components are really just functions. If a component doesn't require any state, lifecycle hooks, or basically any class-specific behavior or state, it is preferable to implement it as a functional component. Previously, you implemented the header component as a class component. The header implements nothing but the render method, a definite clue that it can be a functional component instead.
Now, implement the header component as a functional component by replacing the entire content of Header.js with the following:
import React from 'react';
import './Header.css';
import headerLogo from '../../../assets/logo.png';
const Header = (props) => (
<header className="app-header app-bg">
<div className="maxHeight flex flex-align-items--center">
<img src={headerLogo} className="app-logo" alt="logo" />
<span className="app-slogan">Shop 'till you Drop</span>
</div>
</header...