Learn TypeScript 3 by Building Web Applications

Creating the skeleton

Go ahead and create a songs-list.tsx file under frontend/src/components.

Then, add the following skeleton to this file:

import React, {useEffect} from 'react'; 
 
import Container from 'react-bootstrap/Container'; 
 
type Props = { 
}; 
 
export const SongsList = (props: Props) => { 
    useEffect(() => { 
        console.log('Songs List: component rendered'); 
    }); 
 
    return ( 
        <Container className='lf-songs'> 
        </Container> 
    ); 
}; 

So far, there's not much to it.

Still, you can already add it to the Home view:

1. Open the frontend/src/pages/home.tsx file.
2. Add <SongsList /> at the end of the JSX content (and don't forget to import it on top).