Fetch Data from API in React JS | Learn ReactJS

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.

(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 

🔗 Source Code: https://github.com/gitdagray/react_fetch_api_data 
 
🔗 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 #reactjs