Let's create another component to get more familiar with the process. This time, we'll create a component for the home page by carrying out the following steps:

1. Create a file called HomePage.tsx with the following content:

import React from 'react';

export const HomePage = () => (
  <div>
    <div>
      <h2>Unanswered Questions</h2>
      <button>Ask a question</button>
    </div>
  </div>
);

Our home page simply consists of a title containing the text, Unanswered Questions, and a button to submit a question.

2. Open App.tsx and import our HomePage component:

import { HomePage } from './HomePage';

3. Now, we can add an instance of HomePage under the Header component in the render method:

<div className="App">
  <Header />
  <HomePage />
</div>

4. If we look at the running app, we'll see the title and button under the content of the Header component.

We are going to leave this component for now and come back and style it, as well as add a list of unanswered questions, later in this chapter.