Fetch Data from API in React JS - Learn ReactJS

Learn how to fetch data from an API in React JS in this comprehensive tutorial video. Follow along to master using async and await within the React useEffect hook, and discover how to display fetched data from a REST API on screen. Explore techniques for handling fetch errors, displaying error messages in JSX, simulating slow API responses, tracking loading states, and implementing loading messages. Gain practical experience with JSON-Server and useful React extensions while building a solid foundation in React data fetching concepts.

Syllabus

Intro
Tutorial Set Up
Switching from localStorage to REST API
Using Async Await with useEffect hook
Creating the fetch function
Not all fetch errors go to the catch block
Catching fetch error responses
Displaying errors in JSX
Simulating a slow REST API response
Track loading state
Displaying a loading message in JSX
The complete fetch function inside useEffect