Learn TypeScript 3 by Building Web Applications

Frontend – creating the home view skeleton

Now that the router is in place, let's create our initial views. We'll start with the Home view, which will be displayed by default. This view will be similar to the one in LyricsFinder V1. We will later add the search component to it.

Go ahead and do the following:

1. Create a pages folder under frontend/src.
2. Create a home.tsx file in the newly created pages folder.

For now, just add this within the home.tsx file:

import React from 'react'; 
 
export const Home = () => { 
    return <h2>Home</h2>; 
}; 

Now, adapt frontend/src/App.tsx and add the following inside of the BrowserRouter component:

<Route exact path='/' component={Home} /> 

With this, we have instructed the router to render the Home page when ...