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

[@AdrianTwarog]

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]

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]

I guess it is kind of randomly asking but does anyone know of a good website to stream newly released tv shows online?

[@gerryjtierney]

The move from components to functions has genuinely rendered 99% of these tutorials absolutely obsolete

[@blackswann9555]

my hair loss from last night is returning! thank you for this video, you bring zen to my day!

[@Migler1]

Lol magnificent comment

[@hrishabhgoel6876]

apt representation of a developer who just found an explaination to something that was about to take their life.

[@jasper5016]

This is so so simple tutorial. I am totally impressed. Can you please update this with latest hooks and functional components? Thanks again!!

[@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.

[@luckysuraj1436]

Very good and exact explanation of all requests . Just love the way you explain things so easily .

[@usmanmunir1559]

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]

Great to hear

[@yasyaindra]

i want to code as confident as this guy is

[@charlescampista9384]

Simple and direct the way it should be. That's great, thanks!

[@AdrianTwarog]

Thanks!

[@onyedikachierugo4120]

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]

Awesome man, happy I could help :)

[@jboyle453519]

man you make it look so easy

[@warehousevirtuals]

This video made me sub to you, pretty straight forward no chit chat just info, tnx dude

[@AdrianTwarog]

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]

@@AdrianTwarog Keep it up dude (Y)

[@swojchwat]

Brief and easy to follow. Thanks. BTW you have very nice poilsh surname ;)

[@cheesypoofs3330]

These are exactly what I wanted to hear

[@toberixng]

I like it straight to the point. Thanks

[@hammadansar1059]

You are too good at it. Good Job! Very Helpful

[@amirmohg1319]

great tutorial, might wanna update it since react mostly relies on functions now

[@kajalanthikat5199]

Adrian , straight the point - awesome !!!!!!!!!

[@AdrianTwarog]

Thanks!

[@Damian-qc2]

Great! Quick nad precise! 🎉

[@singh-guri]

Best video ever. Explained easily and made it really simple.

[@PavanKumar-bj7mo]

Well explained Adrian, thank you for the video.

[@siddhesh8633]

Nice, I like the way you teach, please make a video on Software Development Lifecycles.

[@aashiqahmed5273]

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?

[@sambhajisubhashphalke2800]

You are not a actor you are a programmer , The simple behaviour explanation can be fine.Thank you by the way

[@jonasbalsys3696]

Best tutorial ever!

[@AdrianTwarog]

Thanks!

[@luisluiscunha]

Amazing job: thank you, Adrian!

[@iJustTeen]

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]

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.

[@angellovesjazz]

i had to slow the speed down. im new too.

[@adrianchojnacki6884]

Very nice tutorial.

[@fernandomartinez7706]

This helped me a lot, I have to thak you!

[@anjanam9355]

very helpful tutorial

[@AdrianTwarog]

Great to hear :)

[@jirikrajnak9047]

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.

[@bouchrayousra257]

Very useful, thank you

[@srikanthmogiligundla738]

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]

no worries, if there are things you suggest for improving for next time, happy to hear them

[@isbeb507]

this was very useful, thanks

[@jackepner9984]

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?

[@tobiamodu2367]

Thank you Adrian!

[@AdrianTwarog]

Tobi Amodu of course happy I could help!

[@rohitshaw4324]

great explanation. thanks

[@shaunpant7152]

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

[@shahedabbas5265]

Thank you, very nice video. Keep going :)

[@AdrianTwarog]

Thanks, will do!

[@emi_yoda1126]

thanks you save mi life congrats

[@AdrianTwarog]

:)

[@codemedic]

Love the video!!! 👏👍. What font and theme are you using?

[@rahulsriram6295]

Hack Font and Ayu One Dark Theme maybe

[@fcandann]

Thank you very much :))

[@AdrianTwarog]

Sure!

[@chrisdietrich1533]

excellent video. thanks

[@guccigreatness4925]

can u do this with useState and functional components 😢

[@DipeshMalvia]

I have made a video on CRUD with hooks and functional component. If you still looking for it do check my video.

[@guccigreatness4925]

@@DipeshMalvia thanks i will check it out 👍😅

[@guccigreatness4925]

@@DipeshMalvia can you give me a link to the video 😅

[@DipeshMalvia]

About to publish in some time I will update you once it gets published.

[@DipeshMalvia]

The video is published you can just click on my profile and check it won't be fair I add my KZbin video link in Adrian's video comments.

[@shintopaul1018]

Thank you!! Explained well in such a short.. could you make a video of Json Web Token(JWT) also?

[@TheMenny10]

Awesome video! quick question what theme are you using on VSCode?

[@rahulsriram6295]

Ayu One Dark Theme

[@rizqiyaputra88]

it's usefull tutorial .... thanks

[@AdrianTwarog]

Glad it was helpful! :)

[@jmgomw7787]

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]

You can set cors settings on both the backend and the front end settings on systems so I opened those up

[@mahkamehfallah8321]

Thank you Adrian :*

[@AdrianTwarog]

Ghazale fallah your welcome :)

[@mahkamehfallah8321]

@@AdrianTwarog Dear Adrian can I follow you on instagram?

[@mahkamehfallah8321]

@@AdrianTwarog Dear Adrian I have a big problem with storybook .can you help me?

[@AdrianTwarog]

Sure!

[@AdrianTwarog]

I haven’t used it before, but good idea for a video!

[@jasper5016]

Why dont you do a small React course? You will get great response.

[@Submersed24]

What's the difference between this and any other request handler like superagent? Don't they just do the same thing?

[@DevOpsHasan]

Last part about change authentication header depend on user login how to change it, please share an example.

[@leoshrek2201]

Why use then inside an await function. Your code can be simplified. const { data } = await axios.get(‘url’)

[@Dcoding4ever]

Nice video !, Can you make the same example but with functional React and promises

[@radmehrdehghani9240]

very good

[@PrakharGupta36]

Thank you sooo much

[@cliomaas7598]

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 :(

[@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]

Not working for me. He throws an error that there is a ';' missing in the Constructor but its still there even If I add ';'

[@vaclavvlcek4527]

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]

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.

[@TheNamesJT]

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]

Might do a future video for something like this!

[@michaelrooze278]

How are you not using let or const for the function expressions?

[@shiyammosies5975]

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?

[@motadaymane3262]

Cool content, how about making any react / react native course regarding structure of your project for large scale apps :)

[@AdrianTwarog]

Great suggestion! Adding it to my list for future videos :)

[@chiraggupta2561]

I used node as a backend to fetch data in react but it show me provisional header are shown.

[@omerakkoca8263]

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?

[@buggplayer2301]

Big fan

[@guilhermerio]

how do i make a search on my db and show the results (select)?

[@shubhajithalder2054]

How easy things can be. Was breaking my head for 5 hrs and could not find a easier way to use axios.

[@ariphharts]

I like the way you teach, but take into account not everyone uses class-based components in react

[@alexlui1]

good overall but 3 lines of code with no space or new line? hard to read for everyone

[@esmameral1349]

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]

I did get the same error too. Seems like this tutotial doesn't work.

[@KrishnaRamchandani]

I'm getting this error related to network -> Unhandled Rejection (Error): Network Error does anyone knows how to solve it.

[@baetraki7268]

how about knowing the login, logout state of a user???

[@RyanPetersons]

Side Question. How is your editor soooooooo smooth!?

[@MuhammadYusuf-hk8pg]

same question

[@ericelsner1553]

Why not use functional components?

[@devappsinvo5405]

really cool :)

[@Hedenica]

What is your icon extension on vsc 😁 ?

[@AdrianTwarog]

I’ve made a recent video on vscode plugins and it’s vscode-icons package

[@vibelover5444]

yo... why are you still using class components???????

[@kg_3415]

Can you please make a video of dynamic sidebar menu in react please

[@Shubham-xh9nz]

why not hooks ? , functional components are

[@AdrianTwarog]

shubha might have to do a video dedicated to hooks. I need to learn to use them properly!

[@hi_im_willow]

can someone show me how to create a single view using api

[@HelluGoes]

Is there a reason you're using classes and not functions and hooks as it is todays "standard"?

[@AdrianTwarog]

because i made this yonks ago!

[@shyrenmore8140]

How to use axios with react hooks?

[@ismoiljonabduqahhorov5825]

lol you got one more subcriber)))))

[@comment8767]

link to completed source?

[@AdrianTwarog]

Doco and code on the main site I think :) reused guild line examples

[@adityaheart9671]

@@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 🙏🙏🙏

[@mujahidislamkhan782]

delete is not working.

[@AdrianTwarog]

Check doco for specifics!

[@jheyssonurbano7368]

Try this: onClick={()=>deleteCourse(course.id)}

[@shredderlinic]

Class components called, they want to retire.

[@AdrianTwarog]

True, I’ve started learning, I’m old!

[@marcofabiopavone5027]

At 2:37 I'm getting a TypeError: "this.state.courses.map is not a function".

[@SamiKhammar]

probably you are using a functional component , try " courses.map " instead

[@learn9329]

Next time please explain in more detail and may be not so fast. Difficult to catch up for beginners.

[@mackynikat8833]

. i always had an network error boss

[@localblackman427]

is there source code from this anywhere?

[@CANIHAZURDREAMSPLS]

Would be better if taught slower and explained in depth the different api and functions

[@eleazarfederio1718]

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]

Syntax can be anything, react has a few functional or class components

[@aashiqahmed5273]

Before hook was not a major thing,React ships with class components with boilerplate CLI but now its functional components

[@RaviKumar-lp6nz]

Now I understand why so many dislikes

[@migueldomingos4570]

Using class components is not good bro

[@AdrianTwarog]

This vid was a long long time ago :)

[@migueldomingos4570]

@@AdrianTwarog Then let's hope that the gods forgive you😂

[@Human_Evolution-]

It's data, not data.

[@sebastianussembara3463]

how to set token in headers to get api for protected api with jwt

[@AdrianTwarog]

Might need to check the doco for that

[@tommyleong8328]

Great content on ReactJs! Would love to request a media query content if possible (: @Adrian

[@AdrianTwarog]

Tommy Leong sure will do thanks!

[@tommyleong8328]

I actually did it! Maybe can share techniques or things to take care while developing a mobile first website 😊