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

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.

***Checkout pre-requites videos in case you have missed ***

🔥 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***

***Github link for Reference***

***More videos***

***Checkout my crash courses for get started with web development***

🔗 Social Medias 🔗

⭐️ 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.

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

[FahadKhan-rprz]

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!

[RizaHariati]

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

[jhumurpaul]

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.

[puneetshrivastava]

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

[ankushtagore]

Quality and speed, both were impressive.

[its_joel]

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

[ashwinprabhu]

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.

[CharosMuhiddinova-srkb]

I request you to make a full course on axios.

[giduturigiriprasad]

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

[jaysingh]

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

[diegocueva]

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

[mdfyhtl]

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?

[cristianjohanoterooviedo]

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

[etekumoses]

Dipesh you are the best thanks for this content

[ankitparte]

A Helpful video, thank you soo much ⚡👍🏻

[rayenhidri]

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

[niklausmikaelson]

When ill deploy this on Netlify json server will work

[pundlikborse]

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