We have put together a small challenge for you to put your React knowledge to test!
Below you can find small subtasks for you to complete. Have fun!
First off, you will need to fork the project, then:
yarn (or npm install)
yarn start (or npm run start)
# Happy hacking ;)The header is rendered directly in the app.js. Try to extract it and create a Header component to then use this component instead of the header
-> Check the TODO 1 in the code
The selectTab function is the one called when a user clicks on a filter. For now it doesn't work, so your task is to change the selected property of the right filter in the array
-> Check the TODO 2 in the code
Pass the selectTab function to the FilterList component
-> Check the TODO 3 in the code
When the user clicks on the top left icon, the sidebar should be shown.
-> Check the TODO 4 in the code
When the user types something in the search bar (located in the sidebar), you need to update the state and call the filterMovie function.
-> Check the TODO 5 in the code
The solution is deployed live here
You can take a look at the solution to see how the app should behave when everything is correct.
You realised you need to brush your JS knowledge a bit? No worries, we offer the 2-day JavaScript Masterclass!
You loved it but you think your React skills are not on point yet? Check out our upcoming React HackCamps training sessions around Europe where you can learn all about React and Redux and continue building HackFlix guided by expert mentors!
Found it too easy? We have more content for you! Check out the HackCamp Advanced React, to learn Higher Order Components, Hooks and more!
BONUS POINT! If you completed the challenge and everything works, we give you a 5% discount for one of our trainings of your choice! How to get it? Easy! Deploy your work on Netlify and send us a pull request. We will check it and come back to you!