There's barely any app that doesn't work with an API for fetching data and displaying it in some way. This is a fundamental skill for React developers, so here are some challenges that will help your practice:
Learning to fetch data in React is one of the first things you'll learn as you get started with React. But it's not so straightforward - do you use React Query out of the box? Or just stick to useEffect? And even after you're ...
Data fetching with useEffect is easy to use and great for quick one-off or practice apps. I've used it myself for a long time - but recently, I've come to the conclusion it's best to just use react-query, even for the simplest cases. Why? ...
Build a Github Repositories search page, with sorting and pagination. You can use the Github REST Api /search/repository endpoint to query the data. The results should be paginated; by default, show 10 repositories per page Users should be able to: * search repositories by name * choose how many items to ...
Build a React application that shows the national holidays for the current year, for a given country. The main screen should show: * a dropdown with a list of countries * a list of public holidays for the selected country You can retrieve a list of available countries and their holidays from ...
Build a React component that shows a list of 10 articles from the Hacker News API. * use the Hacker News "Top Articles" API * * for each article, display its score, title, url and author * do not display the article details until all the data is loaded * you'll ...
It's common to see websites or applications that show lists of data with a "Load more" button. Usually, the page initially shows just 10-15 results and if the user presses "Load more", more results are loaded and merged into the initial set. Some examples ...
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. ...
28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.
You will also get notified whenever a new challenge is published.
