React Axios CRUD with JSON SERVER | ReactJS Axios REST API | React Tutorials for Beginners

[@DipeshMalvia]

Hey guys, I am working really hard to grow my new channel. If you feel you learned something than please hit the 👍and Subscribe to channel.😎

[@mohammadumar443]

why the updated list is not retained on page refresh ?

[@vilagepixarstudio]

Bro React Axios Login system

[@vilagepixarstudio]

Bro React Axios Login system and deploye

[@hiteshkuamr7922]

love you brother

[@virengothadiya5839]

Good content. But your all viewer is beginner . And your speed is like bullet train :)

[@FahadKhan-rp3rz]

In this tutorial you had not explained much about axios that why you had used axios.create command & what its purpose. Rest of the things are good. I request you to make a full course on axios. Thanks Dipesh

[@RizaHariati]

In all 6 months of using React, I have no idea what class is. This actually a good start for me to learn it. And the CRUD tutorial is very useful too. thank you!

[@codewithrahul5642]

i also learn react from this channel that so good for beginners

[@RizaHariati]

I learn a lot of new things from this tutorial. Very useful. Thank yoiu

[@CharosMuhiddinova-sr5kb]

I request you to make a full course on axios.

[@ankushtagore4299]

Quality and speed, both were impressive.

[@DipeshMalvia]

Thanks @Ankush

[@puneetshrivastava8032]

Fantastic tutorial , your content & your teaching approach stands out in real true sense. Learned a lot ! Best wishes for your channel :)

[@DipeshMalvia]

Glad you enjoyed it!

[@diegocueva4141]

Really thx , muchas gracias!! Greeting from Lima/Peru .

[@svanaja331]

Amazing job, clear explanation.............

[@DipeshMalvia]

Thank you!

[@giduturigiriprasad]

Thanks @Dipesh, This is really a Good Explanation on calling API using axios

[@jhumurpaul3825]

Hi, I like the way you are teaching each and every step clearly. I am beginner and I can understand easily that how to do that. Thanks please make one more video for unit testing.

[@DipeshMalvia]

Yes, it is in my todo list can't promise when it will be released but yes will do it.

[@its_joel7324]

Thank you so much sir easy to practice the API's

[@DipeshMalvia]

You are most welcome

[@cristianjohanoterooviedo4881]

Thanks Dipesh, I learned a lot with this, bless from colombia

[@ashwinprabhu5388]

Great work Dipesh. I know you are putting this for beginners. But it would be great if you could also do modularization of code. for e.g. Putting all the REST API calls in a seperate file and importing those where we need it. This will help to put that approach in place whoever is coding along with you.

[@DipeshMalvia]

Very good point Ashwin. This is Noted!

[@cristianjohanoterooviedo4881]

is the Next thing that I gonna do :v

[@sithiaysha8532]

6r7ueuduucydyduehud😮

[@ankitparte6360]

A Helpful video, thank you soo much ⚡👍🏻

[@nhantrong7395]

Thanks bro! Great tutorial!

[@DipeshMalvia]

Glad you liked it!

[@jaysingh5402]

Hi, This video is nice. But can you make another video by using functional component. I want you do all operation in single page(means add Contact and Contact List show in same page).

[@etekumoses3320]

Dipesh you are the best thanks for this content

[@guilchaves]

Thank you. This really helped me.

[@DipeshMalvia]

Glad it helped!

[@AsifKhan-ic2yw]

heelo, could share your github repo please, I am getting errors

[@DipeshMalvia]

@@AsifKhan-ic2yw :- github.com/dmalvia/React_Tutorial_Contact_Manager_App/tree/react-crud-axios

[@SandyRaut-p9l]

Hey Dipesh, really like watching your video's. You clear the concepts really well. Could you please make a video on using rest api with hypermedia in react?

[@mjylove2]

amazing

[@DipeshMalvia]

Thank you! Cheers!

[@thambimoirangthem4499]

thanks , u save my day

[@DipeshMalvia]

Glad to hear that

[@jamesbaby138]

seriously?

[@React_master]

well explained thank you

[@DipeshMalvia]

Welcome Amin!

[@MohitKumar-tn1cf]

Great episode !!

[@DipeshMalvia]

Thanks

[@fabianhabilramdhan562]

THANK YOU SO MUCH

[@DipeshMalvia]

Glad it helped

[@Vera-qr5rj]

Thank you !

[@draronbalogh]

Thanks man! Great tutorial!

[@DipeshMalvia]

Glad you liked it!

[@jornadacinco]

Thanks my friend, sucess for you :)

[@DipeshMalvia]

Thank you too

[@rajbannasa7662]

thank you so much sir

[@DipeshMalvia]

Most welcome

[@aniketbond0072]

Sir can I connect this frontend to backend project you teached us in backend series? Please help me🙏

[@rayenhidri584]

💯good job, 💬but you could do different operations of crud in differents components can u make a new one ?

[@aniketbond0072]

Sir how can I connect this frontend to the nodejs backend project you teached in backend series. Please help meee🙏

[@rodrigorvcf]

Thanks! This a great tutorial!

[@ahmadganteng7435]

Good tutorial. But instead of JOSN file, why not using real db? That way the tutorial can be directly use on real application

[@mrsharp6345]

I am already working on one demo project, but how do I add this process to the already created project. Thanks in advance

[@niklausmikaelson7332]

When ill deploy this on Netlify json server will work

[@pundlikborse6045]

Thanks lot for nice video. I am little bit confused about react, what are the things I need to learn for complete project development.

[@DipeshMalvia]

I have already made a video on React Roadmap checkout that video it's a simple way to plan your React learning journey with what project you should build.

[@stanleym3537]

Great hob..

[@DipeshMalvia]

Thanks 👍

[@nourelhoudaabdellaoui8120]

so I have a general question in order to integrate axios in your react project. So i need to fetching data from the sign page and i wanna to integrate axios into it in order to do this should i need this page exist in my react project first .

[@rizwanullah6304]

thanks sir, but i have issue in updation when i click the update button the following error will be generated in consol ....Uncaught TypeError: this.props.updateContactHandler is not a function at EditContact.update

[@kolonia_7135]

Hello Sir, i have a question on the css style. I want to display the contacts horizontally but it doesn't seem to work ! it's by default vertically and I didn't know how to do it. can you help me please ?

[@pioleonardo]

can I deploy it in github pages? if Yes, how? I have it deployed but it isn't working. Maybe there is a configuration that I need to know.

[@DeepakGupta-pz4fx]

Waiting for Redux tutorial with api integration

[@rakshajais3683]

Sir,we cannot use Apache server instead of Json server??

[@talhanoory6954]

Hello, at 6:34 i see you have something in your terminal whic is "GET /__rules 404 2.888 ms -2", what does that mean. Should it be ignored, or should there be taken action with it. btw i found out it had something to do with connection between, in your case Port 3001 and Port 3006. Is this true? Wonderful video of course, liked it allot :D

[@DipeshMalvia]

Hi Imma, you can ignore that part not related. I had 2 different React projects running on 3000 and 3001 that was the reason both using the JSON-server.

[@ccd-94]

will it run if I deploy it on vercel? i tried using json server, but it did not work on vercel

[@sudhanshusharan960]

Nice video but how can we deploy this react app with json-server on firebase

[@DipeshMalvia]

You need to google it. I haven't tried so can't answer.

[@S4LTYT]

bro name of headphones you are using

[@sandercastillo9318]

i have question on App.js there is an error saying " id, name, email is assigned value but never used -no-un-used-vars? but it is working?

[@DipeshMalvia]

It's a warning not error.

[@sandercastillo9318]

@@DipeshMalvia that means I just to ignore it leave it like that?

[@diwakarsingh68]

@@sandercastillo9318 const updateContactHandler = async (contact) => { const response = await api.put(`/contacts/${contact.id}`, contact); const { id } = response.data; setContacts( contacts.map((contact) => { return contact.id === id ? { ...response.data } : contact; }) ); };

[@brownwolfgaming4773]

How to crud using file upload sir?

[@RAJEEVKUMAR-tu4tp]

Please keep sharing on vedio

[@nandayelgar2818]

can you create a video on django framework. and one website using antdesign

[@vianneylabay1089]

can u do validation for this? letters allowed?

[@anniezaw8312]

I installed json-server like npm i json-server without -g. Can I still access json server in any project.. thanks in advance

[@DipeshMalvia]

You should install it globally if you want to access the json-server globally from any directory.

[@lijilorance4453]

Sir how to view api data with set previous and next data view from table list

[@brownwolfgaming4773]

Sir, please make tutorial with file base64 crud

[@shankar4582]

is data storing in the json file not explain in the last sir

[@vampire8118]

Is there a clip of React Oauth2 with json server?

[@DipeshMalvia]

Unfortunately I don't have it. But I will try to find some resource so that you can refer.

[@vampire8118]

@@DipeshMalvia Thank , I will wait

[@rizwankhan8757]

I think u should make better playlist means. There is no idea which is part1 or part2 and more .there is so confusion t

[@DipeshMalvia]

Sure Rizwan, let me check and make changes.

[@abishkarjoshi8514]

I'm getting this issue while trying to post data, Locally the data is being saved. Uncaught (in promise) Error: Request failed with status code 500 at createError (createError.js:16); What could be the problem ?

[@DipeshMalvia]

500 status code is probably due to your server not available. Can you please check on that.

[@shikha9482]

Even i got the same error with status code 404. How to resolve this issue? I'm trying since hours but couldn't find any solution.

[@bhavanachajjed7621]

Even I had the same issue

[@abishkarjoshi8514]

@@bhavanachajjed7621 mine issue was solved after I cleared my cache 😄Try doing this...

[@bhavanachajjed7621]

@@abishkarjoshi8514 didn't work out for me

[@PatilAkshay3]

Your Github Link is not working , please can u provide the updated link ?

[@DipeshMalvia]

Try this link - github.com/dmalvia/React_Tutorial_Contact_Manager_App and then switch branches react-crud-axios

[@poojaak8046]

Hey, while doing the update contact part , i am not able to fetch state data(ie props.location.state) from Link cause I am using React Router v6 . Since EditContact is a class component i am not able to use hooks also . Is there any other method to access state from link in class component for react router v6 ?

[@madhu1591]

Same problem.. did u get solution

[@Ameersoccerdev]

Good recently I found your channel great work but I am stuck in styled components multiple theme switcher projects where we select multiple theme for our react website . Can you make toturial for multiple theme switcher with styled components or you can help me thanks

[@DipeshMalvia]

Hi Ameer, you can connect me over my facebook page and ping me your problem we can have a look together.

[@valentinab8754]

how can i publish it on netlify on github pages?

[@waleedsharif618]

Why dont you use hooks ?

[@RaviChandran-gi7ey]

Hi! I have an issue with put request.. Getting 404 error... 🙂

[@DipeshMalvia]

Make sure your Json-server is started.

[@MarijanKopcic]

Is there any source dear sir?

[@DipeshMalvia]

The source code can be downloaded via github link provided in the description. Let me know if face any issues in downloading the source code.😊

[@MarijanKopcic]

@@DipeshMalvia it was demanding but I managed to cope :)

[@sumitsahni5402]

how to deploy with JSON server ????

[@waipod]

Network is running non stop with status 200 sir.

[@danielgreen5803]

What a mess, didn't understand anything. if you want to show something create a new project, don't show it on an existing project with too much information not relevant

[@DipeshMalvia]

It's a part of video if you have to understand the existing code you should watch the previous videos

[@VK-pf4ex]

Were is crud operation tutorial?

[@fauzanmuhammad3889]

how to i get contact-app ?

[@DipeshMalvia]

If you need source code for this project then check the Github link in description. It has different branches.

[@naive_algorithm]

How can I do this without localhost:3006

[@DipeshMalvia]

You need to deploy your APIs to server or just for development purpose you can use JSONplaceholder with Github. I haven't tried check this github.com/typicode/jsonplaceholder

[@МаксимНырков-у6г]

classes in 2k21 ???

[@dever312]

nah bro at least put in description that this is a sequel video,

[@이지연-t6m2b]

7:25

[@naumanhaider6425]

🙄😒🤔

[@Pareshbpatel]

{2021-12-22}

[@kuchalaggyan2502]

Kuch bhi...if u want to do the code for education purpose then only u upload on KZbin

[@rajjasoliya9147]

idk, he is trying more british accent then indian, idk if he is praticing here. I just hate it.

[@fayasahamed5587]

Teach contact us form send email

[@DipeshMalvia]

Noted!

[@fayasahamed5587]

@@DipeshMalvia thak you

[@vinamrasangal8436]

very very bad explaination