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

Подписаться 81 тыс.

Просмотров 217 тыс.

50% 1

In this video we are going to learn about How to setup the JSON-server for our fake APIs and use React Axios package to perform HTTP Requests in react. We will follow the RESTful API convention (GET, POST, PUT, DELETE) and see how easily we do CREATE, READ, UPDATE and DELETE operations on our contacts resource.
We will learn about how to send data to server and get the response back from server. We will see how we update our React state with the data received from server and render our UI with updated data.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
**Checkout pre-requites videos in case you have missed **
How to Learn React JS ? - • React JS Roadmap for D...
React JS Fundamentals Project for Beginners - • Learn React JS Fundame...
Learn React Router With Project - • Learn React Router Wit...
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:20 - What we want to build ?
0:02:00 - Setting up JSON-SERVER
0:03:34 - Understand Rest API convention
0:04:00 - Create Contacts Resource
0:05:50 - Start JSON-SERVER
0:06:45 - Install AXIOS package
0:08:15 - Fetch All Contacts (READ)
0:11:52 - Add new Contact (CREATE)
0:15:07 - Delete a Contact (DELETE)
0:16:25 - Create an Edit component
0:22:03 - Edit Contact (UPDATE)
0:25:18 - Testing CRUD operations
0:26:12 - Outro
**Checkout these video to understand better**
Learn JSON in 25 Minutes - • Learn JSON in 25 Minut...
JavaScript this Keyword - • JavaScript this Keywor...
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**Github link for Reference**
github.com/dmalvia/React_Tuto...
**More videos**
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • JavaScript Tutorial Fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / dipesh.malvia
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Hashtags ⭐️
#React #axios #Tutorials
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

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

2 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 137

@DipeshMalvia 3 года назад

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 3 года назад

why the updated list is not retained on page refresh ?

@vilagepixarstudio 3 года назад

Bro React Axios Login system

@vilagepixarstudio 3 года назад

Bro React Axios Login system and deploye

@hiteshkuamr7922 2 года назад

love you brother

@virengothadiya5839 Год назад

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

@rodrigorvcf 2 года назад

Thanks! This a great tutorial!

@FahadKhan-rp3rz 2 года назад

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

@puneetshrivastava8032 3 года назад

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

@DipeshMalvia 3 года назад

Glad you enjoyed it!

@RizaHariati 2 года назад

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

@cristianjohanoterooviedo4881 2 года назад

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

@diegocueva4141 2 года назад

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

@draronbalogh 3 года назад

Thanks man! Great tutorial!

@DipeshMalvia 3 года назад

Glad you liked it!

@ankitparte6360 Год назад

A Helpful video, thank you soo much ⚡👍🏻

@RizaHariati 2 года назад

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 2 года назад

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

@nhantrong7395 3 года назад

Thanks bro! Great tutorial!

@DipeshMalvia 3 года назад

Glad you liked it!

@Vera-qr5rj Год назад

Thank you !

@jhumurpaul3825 2 года назад

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 2 года назад

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

@CharosMuhiddinova-sr5kb 6 месяцев назад

I request you to make a full course on axios.

@MohitKumar-tn1cf 2 года назад

Great episode !!

@DipeshMalvia 2 года назад

Thanks

@giduturigiriprasad Год назад

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

@ankushtagore4299 3 года назад

Quality and speed, both were impressive.

@DipeshMalvia 3 года назад

Thanks @Ankush

@user-md1fy4ht7l Год назад

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?

@etekumoses3320 Год назад

Dipesh you are the best thanks for this content

@mjylove2 2 месяца назад

amazing

@DipeshMalvia Месяц назад

Thank you! Cheers!

@React_master Год назад

well explained thank you

@DipeshMalvia Год назад

Welcome Amin!

@fabianhabilramdhan562 2 года назад

THANK YOU SO MUCH

@DipeshMalvia 2 года назад

Glad it helped

@its_joel7324 Год назад

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

@DipeshMalvia Год назад

You are most welcome

@svanaja331 11 месяцев назад

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

@DipeshMalvia 11 месяцев назад

Thank you!

@guilchaves 2 года назад

Thank you. This really helped me.

@DipeshMalvia 2 года назад

Glad it helped!

@AsifKhan-ic2yw 2 года назад

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

@DipeshMalvia 2 года назад

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

@jaysingh5402 2 года назад

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).

@ashwinprabhu5388 3 года назад

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 3 года назад

Very good point Ashwin. This is Noted!

@cristianjohanoterooviedo4881 2 года назад

is the Next thing that I gonna do :v

@sithiaysha8532 8 месяцев назад

6r7ueuduucydyduehud😮

@thambimoirangthem4499 Год назад

thanks , u save my day

@DipeshMalvia Год назад

Glad to hear that

@jamesbaby138 Год назад

seriously?

@jornadacinco 2 года назад

Thanks my friend, sucess for you :)

@DipeshMalvia 2 года назад

Thank you too

@stanleym3537 3 года назад

Great hob..

@DipeshMalvia 3 года назад

Thanks 👍

@rajbannasa7662 2 года назад

thank you so much sir

@DipeshMalvia 2 года назад

Most welcome

@kolonia_7135 2 года назад

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 ?

@mrsharp6345 2 года назад

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

@rayenhidri584 Год назад

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

@pundlikborse6045 3 года назад

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 3 года назад

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.

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

@DeepakGupta-pz4fx 3 года назад

Waiting for Redux tutorial with api integration

@rizwanullah6304 2 года назад

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

@Jmendiola 3 года назад

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

@niklausmikaelson7332 Год назад

When ill deploy this on Netlify json server will work

@lijilorance4453 2 года назад

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

@pioleonardo 2 года назад

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.

@S4LTYT 3 года назад

bro name of headphones you are using

@vianneylabay1089 2 года назад

can u do validation for this? letters allowed?

@talhanoory6954 3 года назад

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 3 года назад

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.

@poojaak8046 2 года назад

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 2 года назад

Same problem.. did u get solution

@nandayelgar2818 3 года назад

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

@valentinab8754 2 года назад

how can i publish it on netlify on github pages?

@shankar4582 Год назад

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

@brownwolfgaming4773 2 года назад

How to crud using file upload sir?

@ahmadganteng7435 4 месяца назад

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

@rakshajais3683 Год назад

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

@brownwolfgaming4773 2 года назад

Sir, please make tutorial with file base64 crud

@sandercastillo9318 3 года назад

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 3 года назад

It's a warning not error.

@sandercastillo9318 3 года назад

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

@diwakarsingh68 3 года назад

@@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; }) ); };

@Ameersoccerdev 3 года назад

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 3 года назад

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

@RAJEEVKUMAR-tu4tp 2 года назад

Please keep sharing on vedio

@anniezaw8312 2 года назад

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

@DipeshMalvia 2 года назад

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

@vampire8118 3 года назад

Is there a clip of React Oauth2 with json server?

@DipeshMalvia 3 года назад

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

@vampire8118 3 года назад

@@DipeshMalvia Thank , I will wait

@waleedsharif618 2 года назад

Why dont you use hooks ?

@sudhanshusharan960 2 года назад

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

@DipeshMalvia 2 года назад

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

@abishkarjoshi8514 3 года назад

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 3 года назад

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

@shikha9482 3 года назад

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 2 года назад

Even I had the same issue

@abishkarjoshi8514 2 года назад

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

@bhavanachajjed7621 2 года назад

@@abishkarjoshi8514 didn't work out for me

@PatilAkshay3 3 года назад

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

@DipeshMalvia 3 года назад

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

@RaviChandran-gi7ey 2 года назад

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

@DipeshMalvia 2 года назад

Make sure your Json-server is started.

@fauzanmuhammad3889 3 года назад

how to i get contact-app ?

@DipeshMalvia 3 года назад

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

@sumitsahni5402 Год назад

how to deploy with JSON server ????

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

@VK-pf4ex 3 года назад

Were is crud operation tutorial?

@user-ki4hm8ru7d 2 года назад

7:25

@naive_algorithm 3 года назад

How can I do this without localhost:3006

@DipeshMalvia 3 года назад

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

@waipod 3 года назад

Network is running non stop with status 200 sir.

@MarijanKopcic 3 года назад

Is there any source dear sir?

@DipeshMalvia 3 года назад

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 3 года назад

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

@user-qj2yg1rn3j 2 года назад

classes in 2k21 ???

@Pareshbpatel 2 года назад

{2021-12-22}

@naumanhaider6425 Год назад

🙄😒🤔

@danielgreen5803 2 года назад

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 2 года назад

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