Fetch Data from API in React JS | Learn ReactJS

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to fetch data from an API in React JS as you follow along with this React tutorial. You will learn how to use async and await inside the React useEffect hook and display the data you fetch from the Rest API on the screen.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of a Learn React tutorial series playlist:
   • React Tutorials  

🔗 Source Code: https://github.com/gitdagray/react_fe...

Fetch Data from API in React JS | Learn ReactJS

(00:00) Intro
(00:05) Tutorial Set Up
(01:57) Switching from localStorage to REST API
(04:48) Using Async Await with useEffect hook
(05:45) Creating the fetch function
(09:31) Not all fetch errors go to the catch block
(10:59) Catching fetch error responses
(14:10) Displaying errors in JSX
(18:47) Simulating a slow REST API response
(20:04) Track loading state
(21:15) Displaying a loading message in JSX
(22:52) The complete fetch function inside useEffect

🔗 JSON-Server:
https://www.npmjs.com/package/json-se...

🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...

🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...

🔗 Styled Components: https://styled-components.com/

📚 References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...

✅ Follow Me:
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven  

Was this tutorial about how to fetch data from an API in React helpful? If so, please share. Let me know your thoughts in the comments.

#react #fetch #data