- React Components
- Working with Props & State
- This assignment is aimed at helping you demonstrate and solidify your understanding of React components, props and state.
- To solve this problem, you will need to create a new react app. You can use either create-react-app or vite.
- Visit www.google.com.
- Do a component breakdown analysis and list out the components you discovered
- Implement the Google homepage using React components. Remember to use props for components that are reused.
- Now, you have successfully implemented the Google homepage. To demonstrate the use of states, implement a solution such that, when you enter any search keyword in the search bar, and click on the ‘Enter’ key on your keyboard, the search keyword is displayed directly under the Search bar.
- Push your solution to a GitHub repository and submit the link.
- LINK COMPONENTS: Gmail link, Images link.
- ICON COMPONENTS: User Icon, Google Apps icon, Notifications icon (if any)
- GOOGLE LOGO COMPONENT
- SEARCH BAR COMPONENTS:
- Icon components: Search icon, Microphone icon, camera icon.
- Text Input for Search Component
- SEARCH BUTTONS COMPONENTS(Buttons): Google Search button, I'm Feeling Lucky button
- LANGUAGE OPTIONS COMPONENTS(LINK): Hausa, Igbo, Èdè Yorùbá, Nigerian Pidgin
- COUNTRY NAME(NIGERIA)
- LINK COMPONENTS: About, Advertising, Business, How Search works, Climate action message, Privacy, Terms, Settings
Header Component Main Section Component Footer Component