- Practice the concepts
- React exercises
- Code along
- PROJECT: Hack Your Weather III
This week we'll practice some (hopefully) familiar concepts, with some online exercises. Do the exercises from Introduction to the React Challenges until Access Props Using this.props:
No exercises this week
Create a new GitHub repository for this project. It's a portfolio piece!
It's time for another code along! This week you'll learn how to make a cool Video Player! You'll do so using various packages, among those are styled-components and react-router-dom.
The first is a third party library that'll make writing CSS rules easier in React applications. And it's also used in real life applications!
The latter you'll be learning about next week, but the more preparation you have the better.
Enjoy!
Make sure you're building on last week's codebase.
The main additions you'll add this week is to (1) keep adding to the list of already searched cities and (2) allow users to remove a city from previous search result.
By the end of this week's assignment your application should look similar to this:
Here are the requirements your project needs to fulfill:
- Any time a user searches for a new city, add it to a list of already searched cities
- Allow a user to delete a search entry, by clicking the "X"
- Only allow a user to use the "Search City" button when the input field has at least 1 character
- Redploy your site
Hints:
- Think about what data structure makes most sense to use
- Make use of
filter()when removing cities
After you've finished your list it's time to show us what you got! Upload all your files to a forked repository (a copy from the original, which in this case is the React repository) using GIT. Then make a pull request to your teacher's forked repository.
If you need a refresher, take a look at the following guide to see how it's done.
The homework that needs to be submitted is the following:
- Project: Hack Your Weather III
Deadline Saturday 23.59 CET