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 import { Search } from '../components/search';.
2. Replace the JSX code in the page with <Search />.

In the next subsections, we will wrap our search input and button within the React Bootstrap Container element.

We will proceed in multiple steps:

1. First, we will add the components we need inside of the container.
2. Then, we'll define the state of our component and bind our input to it.
3. After that, we will define handlers for the different events.
4. Finally, we will define some props so that our component can communicate with its clients.

This process is roughly inspired by the following article: https://reactjs.org/docs/thinking-in-react.html.