Now let's add an About page. Here's how it will look:

Let's navigate to the src folder in our project. Create a new file called About.js. We'll start by importing the react package:

import React from 'react';

Next, we need to write a React component. Typically, we'd create a new class that would inherit from React.Component. However, we'll explore a different coding style that would be better suited to the About page.

For simpler components, where a full class is not needed, we simply use what is known as functional components.  Here is how the About component would look when written as a functional component:

export default function About(props){
    return (
        <div className="row mt-5">
            <div className="col-12 order-lg-1">
                <h3 className="mb-4">About the Go Music Store</h3>
                <p>Go music is a modern online musical instruments store</p>
                <p>Explore how you can combine the power of React and Go, to build a fast and beautiful looking online store.</p>
                <p>We will cover how to build this website step by step.</p>
            </div>
        </div>);
}

A functional component is just a function that takes a props object as an argument. The function returns a JSX object that represents the view that we would like the component to show. The preceding code is equivalent to writing a class that inherits from React.Component, then overriding the render() method to return our view. 

In more recent versions of React, a functional component can support a state object, through a feature known as React Hooks. A React Hook gives you the ability to initialize and utilize a state in a functional component. Here is a simple example of a state counter from the React documentation:

 import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

We do not use React Hooks in our code here. However, if you are curious about the feature, you can explore it by visiting https://reactjs.org/docs/hooks-intro.html.

Before we move to the next section, it's worth mentioning that the Card component could have been written as a functional component as well, since it was relatively simple, and didn't need a constructor or any special logic beyond the render() method. 

Now, let's talk about how to build dialog windows in our React app.