React Axios | Tutorial for Axios with ReactJS for a REST API
HTML-код
- Опубликовано: 29 авг 2024
- React Axios tutorial is about using the promised based HTTP client with a ReactJS application to perform Get requests, Post requests, etc. We will see why using Axios makes accessing a REST api easy, as well as passing JSON data to and from the server.
We go over how to use axios with react, starting by how to install axios in our react app. We will import axios into the react project and initiate an instance of axios to an API endpoint with a baseURL. This will let us perform get, post, patch and delete requests to the server.
Using react axios api, we will then perform some HTTP get requests and set that response data into a react state. This will be updated when we later delete or update that same data.
React axios crud is about using react axios HTTP requests to make it easier to access REST. It can be used in plain javascript, in react native applications, or even in plain javascript. Ideally, you can set an instance of axios to run in the store of an application with custom headers, such as a token or api key. We also look at using react axios async await functions to allow our code to run much better and cleaner, with try catch loops. If you don't use the latest async functions, you can also run then / catch events in axios as part of it's api in order to identify if there was an error in getting the response from the server.
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui....
Feel free to follow me on:
🐦 Twitter: in...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.i...
🌿 Envato: 1.envato.marke...
🌿 Envato Elements: 1.envato.marke...
🔴 Elementor: elementor.com/...
✖ Editor X: www.editorx.co...
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
I am trying to grow my channel, so if you find this video useful, #subscribe & hit the #bell :) Thanks for watching and hope you liked and learnt something new!
i guess you should update this tutorial to show it with functional components and hooks, also how to use the API variable in the whole project. Its also a good idea to give styles to the new elements you are using, even if you dont put the whole process in the tutorial, the visuals are importants
I guess it is kind of randomly asking but does anyone know of a good website to stream newly released tv shows online?
The move from components to functions has genuinely rendered 99% of these tutorials absolutely obsolete
my hair loss from last night is returning! thank you for this video, you bring zen to my day!
Lol magnificent comment
apt representation of a developer who just found an explaination to something that was about to take their life.
Simple and direct the way it should be. That's great, thanks!
Thanks!
Very good and exact explanation of all requests . Just love the way you explain things so easily .
Love you, sir. thanks for making this video so easy and fast. Very helpful, and easy to understand in fast-paced learning. Lots of love and support.
This video was really so helpful for me and I got a better idea of what a axios is and how to use it , Thanks for such a content , Keep making videos like this
Great to hear
This is so so simple tutorial. I am totally impressed. Can you please update this with latest hooks and functional components? Thanks again!!
These are exactly what I wanted to hear
i want to code as confident as this guy is
Wow great content and straight to the point, I immediately sub to you cos of the video, was actually looking for a perfect way to make a patch request
Awesome man, happy I could help :)
This video made me sub to you, pretty straight forward no chit chat just info, tnx dude
Wingman thanks that was my goal. I just want to focus on doing straight to the point videos for those wanting to learn a library or framework. Usually research the core aspects in advanced so you don’t have to waste time watching me fix my own bugs or issues.
@@AdrianTwarog Keep it up dude (Y)
I like it straight to the point. Thanks
Adrian , straight the point - awesome !!!!!!!!!
Thanks!
Brief and easy to follow. Thanks. BTW you have very nice poilsh surname ;)
man you make it look so easy
You are too good at it. Good Job! Very Helpful
Best video ever. Explained easily and made it really simple.
After spending 30 minutes on this video and I was writing out comments as I went when I get to the end I finally figured out that this is not the type of tutorial that people can do themselves it's a "FOLLOW ME" so not very helpful to me a react newbie. I did understand what you were talking about but only because I have watched many other react axios videos where the person talked slower and made the course over many (30) videos. I can appreciate how hard it is to be a creator but I think you may want to watch others videos and see how they do things. Thanks and good luck.
Thanks for the feedback, this is useful. I took the time review what most tutorials for axios and react provided, and tried to compile them all into one video that’s a little quicker. However I can try do a bit more in depth version that goes into better depth to explain each part.
i had to slow the speed down. im new too.
Best tutorial ever!
Thanks!
You are not a actor you are a programmer , The simple behaviour explanation can be fine.Thank you by the way
great tutorial, might wanna update it since react mostly relies on functions now
A very great video for me Adrain, my doubt is, how do you host another API instance running on another port, did you used JSON-server?
Great! Quick nad precise! 🎉
Well explained Adrian, thank you for the video.
Nice, I like the way you teach, please make a video on Software Development Lifecycles.
why do you fetch data from the constructor and not from a component lifecycle hook? calling it from the constructor can cause your setstate to trigger before the component did mount.
can u do this with useState and functional components 😢
I have made a video on CRUD with hooks and functional component. If you still looking for it do check my video.
@@DipeshMalvia thanks i will check it out 👍😅
@@DipeshMalvia can you give me a link to the video 😅
About to publish in some time I will update you once it gets published.
The video is published you can just click on my profile and check it won't be fair I add my RUclips video link in Adrian's video comments.
It's like you're jumping in mid-project without explaining where you're at. Where are you getting that json data from on your localhost?? And why wouldn't you create a backend for an API request when you typically have a key you need to hide?
Very nice tutorial.
Thank you, very nice video. Keep going :)
Thanks, will do!
This helped me a lot, I have to thak you!
What is the difference between constructor(){super()api.get()} and componentDitMount(){api.get()}?You say the constructor runs every time the component mounts, isn't componentDidMount() the same? Please help
Amazing job: thank you, Adrian!
Adrian Twarog,
I personally felt this video was not 100 percent useful to me as it didn't show me the execution. Code part we can manipulate once we understand the complete flow.
no worries, if there are things you suggest for improving for next time, happy to hear them
very helpful tutorial
Great to hear :)
Nice video !, Can you make the same example but with functional React and promises
When I deploy my app to Vercel I get a cors error. How can I surpass this? Also what I have done is to hide the api key from the Axios call.
Thank you!! Explained well in such a short..
could you make a video of Json Web Token(JWT) also?
this was very useful, thanks
Adrian, thank you for your effort making explanation videos. I just wanted to let you know that the music at the beginning is kind of annoying :) And one more thing, you might also slow down a bit by explanation. Not offence, I can imagine how difficult it must be to create such videos, I just thought you might appreciate some additional feedback :)
Not working for me. He throws an error that there is a ';' missing in the Constructor but its still there even If I add ';'
I used node as a backend to fetch data in react but it show me provisional header are shown.
Last part about change authentication header depend on user login how to change it, please share an example.
What's the difference between this and any other request handler like superagent? Don't they just do the same thing?
Need a huge favour: While registering a user into the database, before doing that I check if the user exist if not I proceed with registering process. However since Axios method is async, rest of my code proceeds without waiting for the response. How do I make it synchronous?
Very useful, thank you
thanks you save mi life congrats
:)
great explanation. thanks
When i try to get api call in some web address, i get cors error. How can i solve cors error with use axios? can you help me?
Hi Adrian,
When I apply your code in my project I got this error: "Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Home component." I think I should use componentDidMount() lifecycle method. This is my code, can you help me, please?
class Home extends React.Component {
state = {
productList: []
}
constructor(props) {
super(props);
api.get('/').then(res => {
const productList = res.data;
this.setState({ productList });
})
this.onDelete = this.onDelete.bind(this);
this.onAdd = this.onAdd.bind(this);
}
....
}
I did get the same error too. Seems like this tutotial doesn't work.
sir I already have website and I'm trying to build an app and how to get the user data from web to my app
..pls help me sir I'm stuck
How are you not using let or const for the function expressions?
How do you get data from a public api using axios? this video looks like your setting up your own api. I want to grab data from another api online?
Might do a future video for something like this!
hi there, it is actually good video and well explained! thanks.. An small question, how did you managed to overcome the CORS blocking pitfall when consuming an API that resides in a differente host than the react app?
You can set cors settings on both the backend and the front end settings on systems so I opened those up
Thank you Adrian!
Tobi Amodu of course happy I could help!
it's usefull tutorial .... thanks
Glad it was helpful! :)
I'm getting this error related to network -> Unhandled Rejection (Error): Network Error does anyone knows how to solve it.
Never do complicated logic, fetch data in component constructor. Do it in lifecycle hooks.
how do i make a search on my db and show the results (select)?
Why use then inside an await function. Your code can be simplified.
const { data } = await axios.get(‘url’)
excellent video. thanks
Awesome video! quick question what theme are you using on VSCode?
Ayu One Dark Theme
Why dont you do a small React course? You will get great response.
Thank you very much :))
Sure!
Hi! Great video! I have a question that has been hauting me for a while hahaha
How can i make a post request with axios to save a foreign key in my db? I'm trying to make it using this state but it seems impossible :(
how about knowing the login, logout state of a user???
Cool content, how about making any react / react native course regarding structure of your project for large scale apps :)
Great suggestion! Adding it to my list for future videos :)
Thank you Adrian :*
Ghazale fallah your welcome :)
@@AdrianTwarog Dear Adrian can I follow you on instagram?
@@AdrianTwarog Dear Adrian I have a big problem with storybook .can you help me?
Sure!
I haven’t used it before, but good idea for a video!
Love the video!!! 👏👍. What font and theme are you using?
Hack Font and Ayu One Dark Theme maybe
I like the way you teach, but take into account not everyone uses class-based components in react
good overall but 3 lines of code with no space or new line? hard to read for everyone
i'm noob in react, why your app.js in react project is have a class called App and mine doesn't have i use npx create-react-app?
Syntax can be anything, react has a few functional or class components
Before hook was not a major thing,React ships with class components with boilerplate CLI but now its functional components
Why not use functional components?
Thank you sooo much
How easy things can be. Was breaking my head for 5 hrs and could not find a easier way to use axios.
yo... why are you still using class components???????
Big fan
why not hooks ? , functional components are
shubha might have to do a video dedicated to hooks. I need to learn to use them properly!
At 2:37 I'm getting a TypeError: "this.state.courses.map is not a function".
probably you are using a functional component , try " courses.map " instead
how to set token in headers to get api for protected api with jwt
Might need to check the doco for that
can someone show me how to create a single view using api
very good
really cool :)
Side Question. How is your editor soooooooo smooth!?
same question
How to use axios with react hooks?
lol you got one more subcriber)))))
is there source code from this anywhere?
delete is not working.
Check doco for specifics!
Try this:
onClick={()=>deleteCourse(course.id)}
Can you please make a video of dynamic sidebar menu in react please
Is there a reason you're using classes and not functions and hooks as it is todays "standard"?
because i made this yonks ago!
What is your icon extension on vsc 😁 ?
I’ve made a recent video on vscode plugins and it’s vscode-icons package
link to completed source?
Doco and code on the main site I think :) reused guild line examples
@@AdrianTwarog can you please tell me how can I cache api responses ? I'm using axios to get data from api and I don't want to request the same data everytime I visit the page.
Please link resources where I can learn this please 🙏🙏🙏
. i always had an network error boss
Class components called, they want to retire.
True, I’ve started learning, I’m old!
Next time please explain in more detail and may be not so fast. Difficult to catch up for beginners.
Using class components is not good bro
This vid was a long long time ago :)
@@AdrianTwarog Then let's hope that the gods forgive you😂
Now I understand why so many dislikes
Would be better if taught slower and explained in depth the different api and functions
It's data, not data.