Тёмный

React Axios | Tutorial for Axios with ReactJS for a REST API 

Adrian Twarog
Подписаться 396 тыс.
Просмотров 289 тыс.
50% 1

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.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
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

Хобби

Опубликовано:

 

1 апр 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 183   
@AdrianTwarog
@AdrianTwarog 4 года назад
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!
@juliosantiesteban7709
@juliosantiesteban7709 3 года назад
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
@marlonxander3559
@marlonxander3559 2 года назад
I guess it is kind of randomly asking but does anyone know of a good website to stream newly released tv shows online?
@gerryjtierney
@gerryjtierney Год назад
The move from components to functions has genuinely rendered 99% of these tutorials absolutely obsolete
@blackswann9555
@blackswann9555 2 года назад
my hair loss from last night is returning! thank you for this video, you bring zen to my day!
@Migler1
@Migler1 2 года назад
Lol magnificent comment
@hrishabhgoel6876
@hrishabhgoel6876 2 года назад
apt representation of a developer who just found an explaination to something that was about to take their life.
@luckysuraj1436
@luckysuraj1436 3 года назад
Very good and exact explanation of all requests . Just love the way you explain things so easily .
@charlescampista9384
@charlescampista9384 3 года назад
Simple and direct the way it should be. That's great, thanks!
@AdrianTwarog
@AdrianTwarog 3 года назад
Thanks!
@singh-guri
@singh-guri 3 года назад
Best video ever. Explained easily and made it really simple.
@cheesypoofs3330
@cheesypoofs3330 3 года назад
These are exactly what I wanted to hear
@samirkha
@samirkha Месяц назад
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.
@toberixng
@toberixng 3 года назад
I like it straight to the point. Thanks
@hammadansar1059
@hammadansar1059 3 года назад
You are too good at it. Good Job! Very Helpful
@PavanKumar-bj7mo
@PavanKumar-bj7mo 2 года назад
Well explained Adrian, thank you for the video.
@usmanmunir1559
@usmanmunir1559 3 года назад
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
@AdrianTwarog
@AdrianTwarog 3 года назад
Great to hear
@onyedikachierugo4120
@onyedikachierugo4120 4 года назад
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
@AdrianTwarog
@AdrianTwarog 4 года назад
Awesome man, happy I could help :)
@kajalanthikat5199
@kajalanthikat5199 4 года назад
Adrian , straight the point - awesome !!!!!!!!!
@AdrianTwarog
@AdrianTwarog 4 года назад
Thanks!
@luisluiscunha
@luisluiscunha 3 года назад
Amazing job: thank you, Adrian!
@jboyle453519
@jboyle453519 Год назад
man you make it look so easy
@Damian-qc2
@Damian-qc2 Год назад
Great! Quick nad precise! 🎉
@jasper5016
@jasper5016 2 года назад
This is so so simple tutorial. I am totally impressed. Can you please update this with latest hooks and functional components? Thanks again!!
@warehousevirtuals
@warehousevirtuals 4 года назад
This video made me sub to you, pretty straight forward no chit chat just info, tnx dude
@AdrianTwarog
@AdrianTwarog 4 года назад
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.
@warehousevirtuals
@warehousevirtuals 4 года назад
@@AdrianTwarog Keep it up dude (Y)
@swojchwat
@swojchwat Год назад
Brief and easy to follow. Thanks. BTW you have very nice poilsh surname ;)
@fernandomartinez7706
@fernandomartinez7706 2 года назад
This helped me a lot, I have to thak you!
@yasyaindra
@yasyaindra 2 года назад
i want to code as confident as this guy is
@isbeb507
@isbeb507 3 года назад
this was very useful, thanks
@shahedabbas5265
@shahedabbas5265 4 года назад
Thank you, very nice video. Keep going :)
@AdrianTwarog
@AdrianTwarog 4 года назад
Thanks, will do!
@adrianchojnacki6884
@adrianchojnacki6884 Год назад
Very nice tutorial.
@siddhesh8633
@siddhesh8633 3 года назад
Nice, I like the way you teach, please make a video on Software Development Lifecycles.
@rohitshaw4324
@rohitshaw4324 3 года назад
great explanation. thanks
@bouchrayousra257
@bouchrayousra257 2 года назад
Very useful, thank you
@jonasbalsys3696
@jonasbalsys3696 2 года назад
Best tutorial ever!
@AdrianTwarog
@AdrianTwarog 2 года назад
Thanks!
@shintopaul1018
@shintopaul1018 4 года назад
Thank you!! Explained well in such a short.. could you make a video of Json Web Token(JWT) also?
@amirmohg1319
@amirmohg1319 2 года назад
great tutorial, might wanna update it since react mostly relies on functions now
@aashiqahmed5273
@aashiqahmed5273 3 года назад
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?
@tobiamodu2367
@tobiamodu2367 4 года назад
Thank you Adrian!
@AdrianTwarog
@AdrianTwarog 4 года назад
Tobi Amodu of course happy I could help!
@Equilibrium543
@Equilibrium543 3 года назад
Thank you sooo much
@chrisdietrich1533
@chrisdietrich1533 2 года назад
excellent video. thanks
@anjanam9355
@anjanam9355 3 года назад
very helpful tutorial
@AdrianTwarog
@AdrianTwarog 3 года назад
Great to hear :)
@camilopineda5401
@camilopineda5401 4 года назад
Nice video !, Can you make the same example but with functional React and promises
@emi_yoda1126
@emi_yoda1126 3 года назад
thanks you save mi life congrats
@AdrianTwarog
@AdrianTwarog 3 года назад
:)
@fcandann
@fcandann 3 года назад
Thank you very much :))
@AdrianTwarog
@AdrianTwarog 3 года назад
Sure!
@rizqiyaputra88
@rizqiyaputra88 3 года назад
it's usefull tutorial .... thanks
@AdrianTwarog
@AdrianTwarog 3 года назад
Glad it was helpful! :)
@radmehrdehghani9240
@radmehrdehghani9240 3 года назад
very good
@jirikrajnak9047
@jirikrajnak9047 3 года назад
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.
@jmgomw7787
@jmgomw7787 3 года назад
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?
@AdrianTwarog
@AdrianTwarog 3 года назад
You can set cors settings on both the backend and the front end settings on systems so I opened those up
@shiyammosies5975
@shiyammosies5975 2 года назад
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?
@michaelrooze278
@michaelrooze278 3 года назад
How are you not using let or const for the function expressions?
@motadaymane3262
@motadaymane3262 4 года назад
Cool content, how about making any react / react native course regarding structure of your project for large scale apps :)
@AdrianTwarog
@AdrianTwarog 4 года назад
Great suggestion! Adding it to my list for future videos :)
@chiraggupta2561
@chiraggupta2561 3 года назад
I used node as a backend to fetch data in react but it show me provisional header are shown.
@devappsinvo5405
@devappsinvo5405 3 года назад
really cool :)
@cliomaas7598
@cliomaas7598 2 года назад
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 :(
@DevOpsHasan
@DevOpsHasan 3 года назад
Last part about change authentication header depend on user login how to change it, please share an example.
@buggplayer2301
@buggplayer2301 3 года назад
Big fan
@vaclavvlcek4527
@vaclavvlcek4527 3 года назад
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 :)
@FilipposSdralias
@FilipposSdralias 2 года назад
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.
@codemedic
@codemedic 3 года назад
Love the video!!! 👏👍. What font and theme are you using?
@rahulsriram6295
@rahulsriram6295 3 года назад
Hack Font and Ayu One Dark Theme maybe
@guilhermerio
@guilhermerio 3 года назад
how do i make a search on my db and show the results (select)?
@mahkamehfallah8321
@mahkamehfallah8321 3 года назад
Thank you Adrian :*
@AdrianTwarog
@AdrianTwarog 3 года назад
Ghazale fallah your welcome :)
@mahkamehfallah8321
@mahkamehfallah8321 3 года назад
@@AdrianTwarog Dear Adrian can I follow you on instagram?
@mahkamehfallah8321
@mahkamehfallah8321 3 года назад
@@AdrianTwarog Dear Adrian I have a big problem with storybook .can you help me?
@AdrianTwarog
@AdrianTwarog 3 года назад
Sure!
@AdrianTwarog
@AdrianTwarog 3 года назад
I haven’t used it before, but good idea for a video!
@gck3415
@gck3415 3 года назад
Can you please make a video of dynamic sidebar menu in react please
@TheMenny10
@TheMenny10 3 года назад
Awesome video! quick question what theme are you using on VSCode?
@rahulsriram6295
@rahulsriram6295 3 года назад
Ayu One Dark Theme
@sambhajisubhashphalke2800
@sambhajisubhashphalke2800 2 года назад
You are not a actor you are a programmer , The simple behaviour explanation can be fine.Thank you by the way
@omerakkoca8263
@omerakkoca8263 2 года назад
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?
@baetraki7268
@baetraki7268 3 года назад
how about knowing the login, logout state of a user???
@Submersed24
@Submersed24 2 года назад
What's the difference between this and any other request handler like superagent? Don't they just do the same thing?
@shaunpant7152
@shaunpant7152 10 месяцев назад
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
@KrishnaRamchandani
@KrishnaRamchandani 2 года назад
I'm getting this error related to network -> Unhandled Rejection (Error): Network Error does anyone knows how to solve it.
@esmameral1349
@esmameral1349 3 года назад
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); } .... }
@IggyBudiman
@IggyBudiman 2 года назад
I did get the same error too. Seems like this tutotial doesn't work.
@johnsunnyjohnsunny4296
@johnsunnyjohnsunny4296 Год назад
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
@aleksneso634
@aleksneso634 2 года назад
Not working for me. He throws an error that there is a ';' missing in the Constructor but its still there even If I add ';'
@guccigreatness4925
@guccigreatness4925 3 года назад
can u do this with useState and functional components 😢
@DipeshMalvia
@DipeshMalvia 3 года назад
I have made a video on CRUD with hooks and functional component. If you still looking for it do check my video.
@guccigreatness4925
@guccigreatness4925 3 года назад
@@DipeshMalvia thanks i will check it out 👍😅
@guccigreatness4925
@guccigreatness4925 3 года назад
@@DipeshMalvia can you give me a link to the video 😅
@DipeshMalvia
@DipeshMalvia 3 года назад
About to publish in some time I will update you once it gets published.
@DipeshMalvia
@DipeshMalvia 3 года назад
The video is published you can just click on my profile and check it won't be fair I add my RU-vid video link in Adrian's video comments.
@Hedenica
@Hedenica 4 года назад
What is your icon extension on vsc 😁 ?
@AdrianTwarog
@AdrianTwarog 4 года назад
I’ve made a recent video on vscode plugins and it’s vscode-icons package
@iJustTeen
@iJustTeen 4 года назад
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.
@AdrianTwarog
@AdrianTwarog 4 года назад
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.
@crazygirlfun1
@crazygirlfun1 4 года назад
i had to slow the speed down. im new too.
@shyrenmore8140
@shyrenmore8140 3 года назад
How to use axios with react hooks?
@ericelsner1553
@ericelsner1553 3 года назад
Why not use functional components?
@shubhajithalder2054
@shubhajithalder2054 2 года назад
How easy things can be. Was breaking my head for 5 hrs and could not find a easier way to use axios.
@srikanthmogiligundla738
@srikanthmogiligundla738 3 года назад
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.
@AdrianTwarog
@AdrianTwarog 3 года назад
no worries, if there are things you suggest for improving for next time, happy to hear them
@jasper5016
@jasper5016 2 года назад
Why dont you do a small React course? You will get great response.
@hi_im_willow
@hi_im_willow 2 года назад
can someone show me how to create a single view using api
@ismoiljonabduqahhorov5825
@ismoiljonabduqahhorov5825 2 года назад
lol you got one more subcriber)))))
@jackepner9984
@jackepner9984 11 месяцев назад
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?
@thutranhuu7238
@thutranhuu7238 3 года назад
Never do complicated logic, fetch data in component constructor. Do it in lifecycle hooks.
@TheNamesJT
@TheNamesJT 3 года назад
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?
@AdrianTwarog
@AdrianTwarog 3 года назад
Might do a future video for something like this!
@leoshrek2201
@leoshrek2201 2 года назад
Why use then inside an await function. Your code can be simplified. const { data } = await axios.get(‘url’)
@marcofabiopavone5027
@marcofabiopavone5027 3 года назад
At 2:37 I'm getting a TypeError: "this.state.courses.map is not a function".
@SamiKhammar
@SamiKhammar 3 года назад
probably you are using a functional component , try " courses.map " instead
@mackynikat8833
@mackynikat8833 3 года назад
. i always had an network error boss
@RyanPetersons
@RyanPetersons 3 года назад
Side Question. How is your editor soooooooo smooth!?
@MuhammadYusuf-hk8pg
@MuhammadYusuf-hk8pg 3 года назад
same question
@Shubham-xh9nz
@Shubham-xh9nz 4 года назад
why not hooks ? , functional components are
@AdrianTwarog
@AdrianTwarog 4 года назад
shubha might have to do a video dedicated to hooks. I need to learn to use them properly!
@alexlui1
@alexlui1 2 года назад
good overall but 3 lines of code with no space or new line? hard to read for everyone
@vibelover5444
@vibelover5444 3 года назад
yo... why are you still using class components???????
@localblackman427
@localblackman427 2 года назад
is there source code from this anywhere?
@ariphharts
@ariphharts 2 месяца назад
I like the way you teach, but take into account not everyone uses class-based components in react
@comment8767
@comment8767 3 года назад
link to completed source?
@AdrianTwarog
@AdrianTwarog 3 года назад
Doco and code on the main site I think :) reused guild line examples
@adityaheart9671
@adityaheart9671 3 года назад
@@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 🙏🙏🙏
@eleazarfederio1718
@eleazarfederio1718 3 года назад
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?
@AdrianTwarog
@AdrianTwarog 3 года назад
Syntax can be anything, react has a few functional or class components
@aashiqahmed5273
@aashiqahmed5273 3 года назад
Before hook was not a major thing,React ships with class components with boilerplate CLI but now its functional components
@RaviKumar-lp6nz
@RaviKumar-lp6nz 3 года назад
Now I understand why so many dislikes
@HelluGoes
@HelluGoes 3 года назад
Is there a reason you're using classes and not functions and hooks as it is todays "standard"?
@AdrianTwarog
@AdrianTwarog 3 года назад
because i made this yonks ago!
@sebastianussembara3463
@sebastianussembara3463 4 года назад
how to set token in headers to get api for protected api with jwt
@AdrianTwarog
@AdrianTwarog 4 года назад
Might need to check the doco for that
@oyoyoyoyoyoy9479
@oyoyoyoyoyoy9479 4 года назад
1:40 minute and like+subscription ;)
@mujahidislamkhan782
@mujahidislamkhan782 3 года назад
delete is not working.
@AdrianTwarog
@AdrianTwarog 3 года назад
Check doco for specifics!
@jheyssonurbano7368
@jheyssonurbano7368 2 года назад
Try this: onClick={()=>deleteCourse(course.id)}
@shredderlinic
@shredderlinic 3 года назад
Class components called, they want to retire.
@AdrianTwarog
@AdrianTwarog 3 года назад
True, I’ve started learning, I’m old!
@tommyleong8328
@tommyleong8328 4 года назад
Great content on ReactJs! Would love to request a media query content if possible (: @Adrian
@AdrianTwarog
@AdrianTwarog 4 года назад
Tommy Leong sure will do thanks!
@tommyleong8328
@tommyleong8328 4 года назад
I actually did it! Maybe can share techniques or things to take care while developing a mobile first website 😊
@CANIHAZURDREAMSPLS
@CANIHAZURDREAMSPLS 3 года назад
Would be better if taught slower and explained in depth the different api and functions
@learn9329
@learn9329 2 года назад
Next time please explain in more detail and may be not so fast. Difficult to catch up for beginners.
Далее
Axios Crash Course | HTTP Library
42:20
Просмотров 364 тыс.
React Axios API Requests | Axios with React JS Tutorial
38:32
Et toi ? Joue-la comme Pavard ! 🤪#shorts
00:11
Просмотров 1,8 млн
Осторожно селеба идет 😂
00:16
Просмотров 308 тыс.
REST Call with Flutter - Http methods
19:55
Просмотров 68 тыс.
OpenAI Embeddings and Vector Databases Crash Course
18:41
Use Axios with React Hooks for Async-Await Requests
36:01
The Sidi Rex Boots🔥 #motorcycle #racing #shorts
0:14