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:
https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

Source Code: https://github.com/gitdagray/react_fetch_api_data

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-server

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

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

References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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