React Axios API Requests | Axios with React JS Tutorial

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:

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

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:

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

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

[minsupark]

I was looking for React Axios video and your video came up to my recommendation!!! XD!!! Besides, I'm 1st visitor to this video!! haha Thank you Dave~ !

[mrFighter]

The best React ( the whole series ) explanation on entire internet. I love you approach, thank you man

[DH-jwth]

Dave, as an avid youtube tutorial consumer, I must say your teaching is outstanding. After watching the Node/Express/MongoDB series which contains an extensive section on authentication and JWT authorization I was looking forward to your React client side implementation… Did I miss it? If not, your contribution in that area would, I am sure, be appreciated by many.

[lavitzwind]

I've been waiting for this one. Thank you Dave for these react series are awesome.

[aesp]

i'm just going to give my friendly feedback: i know time is valuable, and people are learning at all different levels, but even as far as just learning axios, this seems like less of a tutorial and more "dave (briefly) shows people how he does things". while i of course don't expect you to be explaining how destructuring works and things like that, i don't really see the point in a tutorial that goes from point to point without even explaining what each step is generally accomplishing. I'm good with going back to docs to understand things, but if I can't really understand why I'm doing a thing, there's very little point. just a little more time spent on that would be a massive difference. Anyway I appreciate the effort and you seem like a great teacher, this is just feedback on this particular video.

[thedevguild]

Impressive, can tell you are a very experienced developer when you code on the go, while speaking.

[isaacnewtonaranas]

that subscribe sound 3:53 sounded to me as some has coughed in the room while im alone. anyway this tutorial is very very AWESOME for someone like a beginner like me. Thanks so much!!!! very very helpful!

[rogelgabrielcristobal]

hey dave, I am having a hard time understanding the built in fetch API of javascript, this tutorial helps me a lot.. thanks

[caffeinated-pixels]

Thanks Dave, you've convinced me to give Axios a try in my current project!

[ivanfrey]

Clarifying question, for the first parameter inside of the AXIOS call which is the path `/posts/{id}`, id is a numerical value, does the URL path only work with numerical values? For example, if I tried to find a post using the title property instead of the id which stores a string value, and the path was `/posts/{title}` that doesn't seem to work, why is that?

[omrishooshan]

im no begginer but its an helpfull tutorial for all levels

[skillkrio]

Dave in the timeframe 26:32 the dependency list of the useeffect post, setEditTitle and setEditBody seems redundant to me because individual post is not gonna change so it will not trigger the useeffect. Every functionality works fine with empty dependency list. Whats the reason of adding the setEditTitle and setEditBody and post over there?If empty list works fine

[xennp]

What will be the route for editpost element in version 6. Can you please help me with it. Thanks, .

[danieltkach]

Hi Dave, I'm researching this, and I have a question since I see you don't address it in the video. I see you are hardcoding "localhost" on the axios.create() function. How do you handle the way the app works in production vs locally? What's the method you use to check if you are running on a deployed version? I've been using the interceptors, but I'm just guessing you can give a much more precise answer and correct way on how to do this. Much appreciated.

[michaelalbrecht]

Somewhat unrelated question, but I'm going through a university Web Security course right now. Our textbook states that bad hackers can gain clues on how to hack the system from error messages that are too detailed. The error messages provide them with clues. Should we log error messages to console if that is the case? Maybe this applies more to server side than client side error messages...? Just curious on what you think about the way to structure error messages and on logging them to console.

[harag]

Great tutorial, many thanks for this. However you seem to be missing the useEffect return and aborting the API calls - I know you want to keep this simple but you didn't mention aborting and possible issues.

[BrainNotUsed]

Thank you for great tutorial serie.

I am afraid that I have some questions:

Is there any reason that you prefer PUT vs PATCH request for axios?
I tested and there is not visible difference, are there any performance or other aspect to be aware of?

[user]

Hi Dave. Thank u for this awesome tutorial. I have a doubt, Can we use axois to fetch data from firebase? I believe we don't need the json server in that case. Please let me know. Thanks.

[siddiqahmed]

Sir I have a small question... Why did you put setEditTitle, setBodyTitle as dependency for useEffect at 26:58. I don't think it is needed there as that function only has to run at load time

[GilbertoTrin]

Hi Dave. Thank u for this awesome tutorial. I have a doubt, why the useEffect function at EditPost.js is not been called everytime the state of input field changes?
If you put that function (setEditTitle) in the dependencies why this not triggering the useEffect?
Thanks