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.
⭐ 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