Learn TypeScript 3 by Building Web Applications

Creating the search component skeleton

Now, create the component's file. Again, following our conventions, we will use lower-kebab-case. Create a file called search.tsx under frontend/src/components.

Next, add the following basic structure for the component:

import React, { useEffect } from 'react'; 
 
import Container from 'react-bootstrap/Container'; 
 
type Props = { 
}; 
 
export const Search = (props: Props) => { 
    useEffect(() => { 
        console.log('Search component rendered'); 
    }); 
 
    return ( 
        <Container className='lf-search'> 
            TODO add content here 
        </Container> 
    ); 
}; 

For now, the component is just an empty shell, but you can already add it to the Home page.

Open the frontend/src/pages/home.tsx file and do the following:

1. Import the Search component using ...