Data fetching
There's a reason why this topic is the most asked on in interviews. Because it's great for testing that you have React fundamentals in place.
Make sure you are able to:
- fetch data from an API and display it on the page
- use server-side filtering and pagination
- combine data from multiple endpoints
- fetch data using different tools: fetch, axios, react-query - and why you would use one or the other
Also a good time to recap related ES6 concepts: async/await, Promise.all and error handling.
Challenges to practice data fetching
I suggest working on these in order.
Build a Public holidays app
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
Corina Udrescu
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.
Corina Udrescu
Show top 10 articles from Hacker News
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 notice I did not
Corina Udrescu
Next stage
When you feel comfortable fetching data, you're ready to go to Stage Two - Thinking in React:
Stage Two - Confident Beginner
Coding exercises to improve your React skills. Detailed solutions to check your work and get feedback, fast.
Corina Udrescu
