Exercises

Component fundamentals Practice React by fixing tests - Check your JSX knowledge!

How would you evaluate your knowledge of JSX? Working with JSX is one of those fundamental skills when working with React that we don't even think about. But behind the surface, there's a lot of things to keep in mind and which make it different from ...

Testing Build a button using test driven development

Try out test driven development by building a simple button component. For this exercise, you're given a set of failing unit tests. Get the tests to pass by implementing the Button component! You can clone this repo to run the test locally. Happy coding! Note: The test uses ...

Structuring components Build a simple shopping cart

Build a simple shopping cart using react-query to fetch the data. The app should have a simple layout, with the products available on the left side of the page and the shopping cart on the right side. Users should be able to: * see a list of products * see their shopping ...

Custom hooks Create a custom hook that allows saving items to the local storage

You will start from an existing Todo List app (yes, another one!) built with React. It works great - users can add / remove items - but there is only one problem - every time the page is refreshed, all the items are lost. Your task will be to implement persistence ...

Working with forms Create a simple Contact Book app

Create a simple Contact Book app that allows users to manage a collection of friends’ contact details. For each person, the user should be able to save the name and city where they live. Users should be able to add, edit and delete persons. All contact details should be displayed ...

Working with APIs Create a movie search page

Create a page that allows users to search for movies. It should consist of a search input box and a search button. When the user clicks “Search”, the page should show the search results. You can use the free public The Movie Database API to search for the movie details. ...

Working with setInterval Create a timer that can be started and stopped

Create a 5 minute countdown timer that can be started and stopped. 1. When the page is first loaded, the counter displays 5 minutes (i.e. 5:00) 2. When the user clicks "Start", the counter starts counting down. 3. When the user clicks "Stop", the ...