React Axios API Requests | Axios with React JS Tutorial

Dave Gray ‱ August 3, 2021
Video Thumbnail

About

Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more! My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others. Keep striving for progress over perfection. And a little progress every day goes a very long way. Milestones: July 20, 2020 - 1st video Jan 1, 2021 - 1k subs April 2021 - 4k watch hours Nov 2021 - 10k subs Jan 21, 2022 - Video at 100k views Feb 16, 2022 - 100k watch hours Feb 19, 2022 - 1m views Dec 13, 2022 - 100k subs Dec 2022 - Over 1m views in 1 month April 7, 2023 - 10m views May 26, 2023 - 1m watch hours Sept 22, 2023 - Video at 1m views Dec 25, 2023 - 250k subs

Video Description

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn React Axios API Requests in this tutorial. We will implement Axios with React JS as we build our React JS Blog project. Axios makes API requests easier than using the Fetch API in Javascript. 💖 Support me on Patreon ➜ https://patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Advanced React: https://bit.ly/AdvReactDev - Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr - Master FAANG Coding Interviews: https://bit.ly/FAANGInterview đŸš© Subscribe ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of a Learn React tutorial series playlist: https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp 🔗 Project Source Code: https://github.com/gitdagray/react_axios_requests React Axios API Requests | Axios with React JS Tutorial (00:00) Intro (00:05) Welcome and Tutorial Outline (00:26) JSON Server set up (02:06) Installing Axios (03:29) Setting a baseURL for Axios (04:44) Starting JSON Server (05:21) Starting the React app (06:27) Import the Axios API (07:08) Fetching data with Axios (13:35) Posting data with Axios (17:05) Deleting data with Axios (18:23) Building the handleEdit update function (23:08) Creating the EditPost component (30:24) Adding a Route for the EditPost component (31:52) One more addition to the EditPost component (32:56) Adding an Edit Post button to the PostPage component (33:59) Importing EditPost and testing functionality (35:54) Small CSS Changes 🔗 Axios: https://www.npmjs.com/package/axios 🔗 React Router: https://reactrouter.com 🔗 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: MDN Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox 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 Axios API Requests in React helpful? If so, please share. Let me know your thoughts in the comments. #react #axios #api

You May Also Like