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>
);
 
export default Header;

Now the header component is just a pure function. In React, Stateless Functional Components (SFC) are functions that receive props populated with passed down data and return the rendered content. If you are wondering why the import statement of React is included, it's actually needed whenever a file uses JSX because, without it, the app fails to build.

It is generally preferred to implement functional components when possible. First, it is considered simpler and more readable. Second, the React team has future plans to better optimize the performance of such components.